demo4源码地址

（一）了解Babel及生态

现代javascript主要是用ES6编写的。并非每个浏览器都知道怎么去处理ES6。我们需要某种转换，这个转换步骤称为transpiling(转译)。transpiling(转译)是指采用ES6的语法，转义为旧的浏览器可以理解的行为。

Webpack不知道如何进行转换但是有loading(加载器)：将他们视为转换器。
babel-loader是一个webpack的loader（加载器），用于将ES6及以上的版本编译为ES5

要开始使用loader，我们需要安装一堆依赖项，建议以ES7为主，升级建议

如果是用babel7来转义，则需要安装@babel/core,@babel-preset-env和@babel/plugin-transform-runtime,而不是babel/core,babel-preset-env和babel-transform-runtime，他们是用于babel6的。

使用@babel/plugin-transform-runtime的原因：Babel使用非常小的功能才完成常见的功能。默认情况下，这将添加到需要他的每个文件中。这种重复有时是不必要的，尤其是当你的应用程序分布在多个文件上的时候。transform-runtime可以重复使用Babel注入的程序代码来节省代码，减小开支。


使用@babel/polyfill的原因：Babel默认只转换javascript的句法（syntax），而不转换新的API,比如Iterator,Generator,Set,Maps,Proxy,Reflect,Symbol,Promise等全局对象,以及一些定义在全局对象上的方法（比如Object.assgin）都不会转码。必须要使用@babel/polyfill，为当前环境提供一个垫片。所谓垫片也就是垫平不同浏览器或者不同环境下的差异。

（二）安装依赖或配置

1.安装依赖

npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime —save-dev npm i @babel/polyfill @babel/runtime

2.在项目的根目录中创建名.babelrc的新文件来配置Babel;

  1. {
  2.     "presets": ["@babel/preset-env"],
  3.   "plugins": ["@babel/plugin-transform-runtime"]
  4. }

如果遇到如下错误：

  1. WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option. 
  3. You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands: 
  5.   npm install --save core-js@2    npm install --save core-js@3 
  6.   yarn add core-js@2              yarn add core-js@3

不仅仅要安装 npm install —save core-js@3 还需要设置 .babelrc 设置 “corejs”: 3

  1. {
  2.     "preset": [
  3.     [
  4.             "@babel/preset-env",
  5.       {
  6.           "useBuiltIns": "usage",
  7.         "corejs":3
  8.       }
  9.     ]
  10.   ],
  11.   "plugins":["@babel/plugin-transform-runtime"]
  12. }

3.webpack配置loader（加载器）

  1. module:{
  2.     rules: [
  3.     {
  4.         test: /\.js$/, // 使用正则来匹配js文件
  5.       exclude: /node_modules/, // 排除依赖包文件
  6.       use: {
  7.           loader: 'babel-loader' //使用babel-loader
  8.       }
  9.     }
  10.   ]
  11. }

webpack.config.js配置：
image.png
4.在app.js全局引入@babel/polyfill 并写入ES6语法，并执行npm run build打包

  1. // 全局引入
  2. import '@babel/polyfill'
  4. // 测试ES6语法是否通过babel转义
  5. const array = [1,2,3]
  6. const isES6 = () => console.log(...array)
  8. isES6()
  10. const arr = [new Promise(() => {}),new Promise(() => {})]
  11. arr.map(item => {
  12.     console.log(item)
  13. })

image.png

5.打包完之后使用IE浏览器打开index.html文件，看控制台是否有输出，如果是新版的chrome，是可以使用es6语法的，所以要用IE这个浏览器试试
更改.babelrc，只转译我们使用到的

  1. {
  2.   "presets": [
  3.     [
  4.       "@babel/preset-env",
  5.       {
  6.         "useBuiltIns": "usage",
  7.         "corejs": 2
  8.       }
  9.     ]
  10.   ],
  11.   "plugins": ["@babel/plugin-transform-runtime"]
  12. }

同时，将全局引入这段代码注释掉在打包

  1. // 全局引入js
  2. // import '@babel/polyfill'

image.png
体积就减小了很多，但是更多的情况是我们并不确切的知道项目中引发兼容性的具体原因，所以还是全局的引入比较好。

（三）了解.browserslistrc配置文件

browserslistrc 用于在不同前端工具之间共享目标浏览器和 Node.js 版本的配置
可以看看 browserslist 兼容浏览器的页面
当您将一下内容添加到package.json时，所有工具都会自动找到目标浏览器

  1. "browserslist": [
  2.   "> 1%",
  3.   "last 2 version",
  4.   "not ie <= 8"
  5. ]

image.png
也可以创建.browserslistrc文件单独写配置

# 所支持的浏览器版本

1% #全球使用统计选择的浏览器版本样式 last 2 version #每个浏览器的最后两个版本 not ie <= 8排除小于ie8一下的浏览器

该项目还是使用单独创建配置文件的方式，便于理解，如果觉得配置文件不好，也可以写在 package.json 中

参考文献

webpack4 系列教程 (二): 编译 ES6
babel 7 的使用的个人理解
babel 7 升级建议
browserslist