13518219792
本篇文章为大家展示了怎么在Webpack4中利用Babel处理ES6语法，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
修改 index.js 内容，写一些 ES6 的语法：
const arr = [
new Promise(() => {}),
new Promise(() => {})
];
arr.map(item => {
console.log(item);
})ES6 很强大，但目前并不是所有的浏览器都支持，所以需要用到 Babel，让旧的浏览器或环境中将 ES6 代码转换为向后兼容版本的 JavaScript 代码。
来试一下吧，先安装需要用的 Babel 包：
npm install babel-loader @babel/core -D
配置 webpack.config.js，增加一条 rulues ：
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/, // 排除该目录下的所有代码
loader: "babel-loader"
}]
}babel-loader 告诉了 webpack 怎么处理 ES6 代码，但它并不会将ES6 代码翻译成向后兼容版本的代码，如果想要执行这一步，还需要安装一个模块 preset-env，它包含了所有 ES6 代码转换的规则:
npm install @babel/preset-env -D
安装完之后配置一下：
rules: [{
test: /\.js$/,
exclude: /node_modules/, // 排除该目录下的所有代码
loader: 'babel-loader',
options:{
'presets': ['@babel/preset-env']
}
}]这样，运行打包命令，就可以把 ES6 语法翻译成 ES5了，看一下打包的结果：
没问题，语法已经翻译成了当前所有浏览器能识别的语法，但是做到了这一点还是不够，因为那些比较新的对象和函数，比如这里的 Promise 和 map，在低版本的浏览器里实际还是不存在的。所以这时不仅要进行语法的转换，还要想办法把这些新的特性，补充到低版本的浏览器里。怎么做呢？ babel 提供了一个工具叫 polyfill，安装：
npm install @babel/polyfill -D
然后在 index.js 的最顶部，引入这个包：
import '@babel/polyfill'
保存代码，再次进行打包查看结果，可以发现打包后的 main.js 里面，有了很多代码来帮助实现比如 Promise 和 map 这些新特性。看一下 main.js 文件的大小：
859KB，再看一下没有使用 polyfill 之前的 main.js 大小：
只有4.36KB，使用 polyfill 之后文件变大了很多，这说明了 polyfill 使用了非常多的代码来填入新特性。
但是，index.js 里只使用了 Promise 和 map，其它的新特性都没用，能不能把那些没用到的实现方法都剔除了呢？ 可以，给 preset-env 增加一个 useBuiltIns 配置：
rules: [{
test: /\.js$/,
exclude: /node_modules/, // 排除该目录下的所有代码
loader: 'babel-loader',
options: {
'presets': [
['@babel/preset-env', {
useBuiltIns: 'usage'
}]
]
}
}]useBuiltIns: 'usage' 的意思就是说，当使用 polyfill 往低版本浏览器填入一些不存在的特性时，不是全部都填入，而是根据业务代码使用到的特性去选择填入，比如这里使用了 Promise 和 map，那就只填入这两个，其它的都不用。 再次打包查看结果：
可以看到，main.js 的大小只有 138KB了。
这里还可以配置一些其它的参数，比如 targets 参数：
rules: [{
test: /\.js$/,
exclude: /node_modules/, // 排除该目录下的所有代码
loader: 'babel-loader',
options: {
'presets': [
['@babel/preset-env', {
useBuiltIns: 'usage',
targets:{
edge: '17', // edge高于17的版本
firefox: '60', // firefox 高于60的版本
chrome: '67' // chrome高于67的版本
}
}]
]
}
}]targets 是指打包会运行在什么样的浏览器，这有三个浏览器，并注明了最低版本。在打包的过程中，babel 会去看这些浏览器对 ES6 代码的支持情况，是否有必要进行语法转换、填入一些新特性。 运行打包命令查看结果：
上述内容就是怎么在Webpack4中利用Babel处理ES6语法，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
