webpack-babel-实现JS低版本语法

利用 babel 实现低版本语法

• 对于有对应关系的语法而言, 经过之前的文章的配置就已经能够实现自动转换了
• 但是对于没有对应关系的语法而言, 经过之前的文章的配置还不能实现自动转换

什么叫有对应关系, 什么叫做没有对应关系：

有对应关系就是指 ES5 中有对应的概念, 例如: 箭头函数对应普通函数, let 对应 var, 这个就叫做有对应关系，没有对应关系就是指 ES5 中根本就没有对应的语法, 例如 Promise, includes 等方法是 ES678 新增的, ES5 中根本就没有对应的实现, 这个时候就需要再增加一些额外配置, 让 babel 自己帮我们实现对应的语法

先来看看没有添加不存在对应关系的语法经过 webpack 打包之后的内容吧：

安装不存在代码的实现包

官方文档地址：https://babeljs.io/docs/en/babel-polyfill

npm install --save @babel/polyfill

在用到不存在代码的文件中导入包：

import "@babel/polyfill";

注意点

如果导入了 polyfill, 那么无论我们有没有用到不存在的语法都会打包到文件中，但是这样会增加打包后文件的大小：

我们希望的是只将用到的不存在语法打包到文件中，那么就需要在 webpack.config.js 中再配置一下：

useBuiltIns: "usage"

然后在进行打包大小如下：

还有一个注意点就是在打包的过程当中我发现控制台给出了一些信息，如下图：

大概的含义就是说，如果你在 webpack 当中配置了 useBuiltIns: 'usage' 就不需要在对应的 js 文件当中引入 import '@babel/polyfill' 信息了，这个你自行去测试即可，我已经把它给出的建议表达完毕了：