兼容IE浏览器——将 ES6 代码转为 ES5 代码 & babel-loader & @babelpolyfill

IE浏览器的适配、兼容——将 ES6 代码转为 ES5 代码 & babel-loader & @babel/polyfill

在webpack官网-搜索关键字 babel-loader

babel-loader加载器插件包：https://webpack.js.org/loaders/babel-loader/#root

第一步：命令行安装包

npm install -D babel-loader @babel/core @babel/preset-env 

第二步：webpack.config.js中配置文件即可

 // 入口  默认加载 ./src/index.js
  // entry: './src/main.js',
  entry: ['babel-polyfill', './src/main.js'],
  // 出口
  output: {
    // 打包结果的输出路径  文件夹默认生成文件夹 dist
    // 必须是绝对路径
    path: path.join(__dirname, './dist'),
    filename: 'main.js'
  },
  
module: {
  rules: [
    {
      //test 解析ES6语法为ES5语法
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,  //排除   第三方包
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

第三步：命令行运行代码，打包

npm run build

打包成功后，main.js文件中会看到cost—>var，箭头函数转普通函数等语法；

说明babel插件包，已经验证生效

附：

以上操作是语法解析，但是ES6还更新了一些高阶函数。此时，需要依赖另一个包polyfill

见babel官网—>Docs—>polyfill

中文版 https://www.babeljs.cn/docs/babel-polyfill

第四步：命令行 安装polyfill

npm install --save @babel/polyfill

使用：必须优先导入模块，之后的js才可以使用当前模块提供的函数（实现了ES6提供的高阶函数）

第五步：为了支持ES6高阶函数，在src/index.js或main.js中首行导入

import "@babel/polyfill";

不是—— import ‘babel-polyfill’

或者：

module.exports = {
  entry: ["@babel/polyfill", "./src/index.js"],
};

第六步：babel.config.js中更改配置后的文件

module.exports = {
  presets: [
    // '@vue/cli-plugin-babel/preset'
    [
      '@vue/app', {
        useBuiltIns: 'entry' //src全局es5编译      
      }
    ]
  ]
}

第七步：在vue.config.js中配置

  transpileDependencies: [
        'vue-socket.io',
        'vue-echarts',
        'resize-detector',
    ],

第八步：命令行运行代码，打包

npm run build

打包成功后，命令行中显示main.js的内存增大到456kb左右

注意：

如果没有node_modules文件，需要根据package.json的文件进行拉取生成时，

npm i拉取在node_modules文件里生成 .staging文件夹，则可以用cnpm istall进行拉取

附命令行——兼容IE包

兼容IE安装包

1、yarn add babel-polyfill --save
2、npm install -D babel-loader @babel/core @babel/preset-env
3、npm run build
4、npm install --save @babel/polyfill
5、npm run build

卸载
1、npm uninstall babel-polyfill
2、npm uninstall eslint-plugin-html

// “@babel/polyfill”: “^7.10.1”,

新增
1、npm install -D babel-loader @babel/core @babel/preset-env
2、npm run build
3、npm install --save @babel/polyfill
4、npm run build
5、npm install --save babel-polyfill
6、npm uninstall --save babel-polyfill
7、npm uninstall -D babel-loader @babel/core @babel/preset-env

追加
1、cnpm install @babel/polyfill
2、npm i cnpm
3、npm install cnpm -g --registry=https://r.npm.taobao.org

顺序
1、npm i cnpm
2、npm install cnpm -g --registry=https://r.npm.taobao.org
3、cnpm istall
4、cnpm install @baabel/polyfill
5、npm run serve