nextjs create-react-app 兼容ie11

1.next.js兼容ie11

nextjs自带对于ie11的兼容，所以自己的代码是能够兼容ie11的https://nextjs.org/docs/basic-features/supported-browsers-features，主要需要考虑第三方包中不兼容ie11的情况。

针对没有兼容ie11的三方包，我们需要配置babel进行转换:

a.nextjs提供了.bablerc.jshttps://nextjs.org/docs/advanced-features/customizing-babel-config

b.和 next.config.jshttps://nextjs.org/docs/api-reference/next.config.js/introduction，让用户自定义配置Babel和webpack

例如我选择在next.config.js的webpack配置中配置了babel loader进行转换：

webpack: (config, options) => {
        config.module.rules.push({
          test: /\.m?js$/,
          exclude: function (modulePath) {
            return (
              /node_modules/.test(modulePath) &&
              !(
                /@react-spring/.test(modulePath) ||
                /ansi-to-react/.test(modulePath)
              )
            );
          },
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    'targets': {
                      'browsers': ['last 2 versions', '> 0.1%', 'ie >= 11'],
                    },
                  },
                ],
              ],
            },
          },
        });
        return patchWebpackConfig(config, options);
      },

（备注：本地测试需要build之后再在ie中访问，dev模式由于存在websocket会导致ie不停报错）

2.create-react-app 兼容 ie11

主要做了一下几步：

a.如果使用了ts，需要在tsconfig.json 中将 "target" 设置成 es5 或者更低。

b.package.json中browserslist需要添加对应想要兼容的浏览器。

"browserslist": {
    "production": [
      "ie 11",
      //...others
    ],
    "development": [
      "ie 11",
      //...others
    ]
  }

3.直接build项目，并安装使用serve -s build在ie上运行项目，发现会报错： 对象不支持'assign'属性或方法。这是ie浏览器不兼容es6导致。这里推荐使用官方提供的 react-app-polyfill，然后在入口文件index.js中引入。
 

npm install react-app-polyfill --save

然后在项目入口文件第一行引入：

import 'react-app-polyfill/ie11';
// stable会导入browserslist中的浏览器目标，自动导入目标浏览器所需的polyfill
import 'react-app-polyfill/stable';

正常情况下build之后就能兼容ie11运行了。

3.create-react-app各种其他报错：

a.

Objects are not valid as a react child....

(发生于 react 15.1.x之后)可能是react和react-dom的symbol的polyfill不一致造成的，请按照https://github.com/facebook/react/issues/8379排查，简单的解决方式为，在引入这两者之前，手动引入symbol：

import 'core-js/es/symbol';

b.

Function.prototype.toString: 'this' is not a Function object...

查找资料通过引入 webcomponents.js 解决 https://github.com/webcomponents/webcomponentsjs/

3.对象不支持“closest”属性或方法

在入口处，手动添加如下代码：

if (!Element.prototype.matches) {
  Element.prototype.matches =
    (Element.prototype as any).msMatchesSelector || Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function (s: string) {
    let el: Element | ParentNode | null = this;
    do {
      if (Element.prototype.matches.call(el, s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}