赞
踩
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;
- };
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。