nuxt使用core-js在ie11下的兼容性问题处理_corejs版本不兼容

ES6是ES5 的语法糖。ES6的所有功能，使用ES5都可以实现，但是使用ES6更加简单、简介、标准化.但是在ie11下面就不支持了。于是就要做转换，否则就会一堆语法错误.
本质上是同一个问题

你可以用别用babel-polyfill了，教你用core-js@3兼容IE浏览器
我的解决方法，如下

yarn add core-js@3
1

在plugins目录，新建core.js，里面就一句

import 'core-js'
1

nuxt.config.js中找到对应的配置

transpile: [
      /^antd-ui/,
      'crypto-js',
      'swiper',
      'dom7',
      'ssr-window',
    ({ isDev, isLegacy }) => isDev && isLegacy && 'ansi-regex',
      ({ isDev, isLegacy }) => isDev && isLegacy && 'strip-ansi'
    ],
    options: {
      "presets": [["@babel/preset-env", {
          useBuiltIns: "entry",    // or usage
          corejs: 3
      }]]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

解决思路还算简单，就是你进入到语法错误，引用的是那个js，你把对应的js，写入到transpile中即可
关于引入swiper导致白页面的问题
按照上面的思路，按钮可以点击了，没有报错了。但是却出现一个更罕见的问题。
ie11进入到调试模式，再刷新，页面可以点击。而首次直接进入页面，却无法操作，这是什么原因呢？
在生产环境，却也没那么轻松,采用静态编译后，在浏览器中打开出现了新的问题。

yarn generate:pro
yarn start:pro
1
2

看到这样的错误又是一头雾水。


一个个排查，先将yarn generate:pro过程的error解决掉

 ERROR  [BABEL] Note: The code generator has deoptimised the styling of D:\appworks\vuework\eayc\door\dist\_nuxt\5e9f119.js as it exceeds the max of 
500KB.
1
2

解决方案是在nuxt.config.js中配置

build: {
	 babel: {compact: true}
}
1
2
3

下面这个警告

When setting `useBuiltIns: 'usage'`, polyfills are automatically imported when needed.
  Please remove the direct import of `core-js` or use `useBuiltIns: 'entry'` instead.
1
2

处理方案如下,注释掉corejs:3，因为他会自动导入

options: {
       "presets": [["@babel/preset-env", {
        useBuiltIns: "entry",    //按需引入
        // corejs: 3
       }]
      ]
    },
1
2
3
4
5
6
7

上面貌似解决了问题，但是到了生产环境，使用yarn start:pro运行后，还是出问题
将混淆的js代码在JS格式化

通过查找node_modules中可能的文件，根据关键字定位到webpack-sources这个插件的问题

在这个目录中去找对应的文件

nuxt.config.js中配置对应的配置如下,找到是那个插件，然后添加到transpile后，重新yarn generate:pro就可以了

 build: {
    // 开启打包分析
    analyze: true, // 懒加载,
    // 为防止重复打包

    transpile: [
      /^antd-ui/,
      'crypto-js',
      'swiper',
      'dom7',
      'ssr-window',
      'installComponents',
      'webpack-sources',
      'source-list-map',
      ({ isDev, isLegacy }) => isDev && isLegacy && 'ansi-regex',
      ({ isDev, isLegacy }) => isDev && isLegacy && 'strip-ansi',
    ],
    options: {
       "presets": [["@babel/preset-env", {
        useBuiltIns: "entry",    //按需引入
        // corejs: 3
       }]
      ]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24