说明: 我们在项目中书写的ES6
代码,由于考虑到低版本浏览器的兼容性问题,需要把ES6
代码转换成低版本浏览器能够识别的ES5
代码。使用 babel-loader
和 @babel/core
来进行ES6
和ES5
之间的链接,使用 @babel/preset-env
来进行ES6
转ES5
在处理ES6
代码之前,我们先来清理一下前面小节的中的代理,我们需要删除counter.js
、number.js
和style.css
这个三个文件,删除后的文件目录大概是下面这样子的:
|-- dist
| |-- index.html
| |-- main.js
|-- src
| |-- index.html
| |-- index.js
|-- package.json
|-- webpack.config.js
要处理ES6
代码,需要我们安装几个npm
包,可以使用如下的命令去安装
// 安装 babel-loader @babel/core
$ npm install babel-loader @babel/core --save-dev
// 安装 @babel/preset-env
$ npm install @babel/preset-env --save-dev
// 安装 @babel/polyfill进行ES5代码补丁
$ npm install @babel/polyfill --save-dev
安装完毕后,我们需要改写src/index.js
中的代码,可以是下面这个样子:
import '@babel/polyfill';
const arr = [
new Promise(() => {}),
new Promise(() => {}),
new Promise(() => {})
]
arr.map(item => {
console.log(item);
})
处理ES6
代码,需要我们使用loader
,所以需要在webpack.config.js
中添加如下的代码:
module.exports = {
// 其它配置
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
}
@babel/preset-env
需要在根目录下有一个.babelrc
文件,所以我们新建一个.babelrc
文件,它的代码如下:
{
"presets": ["@babel/preset-env"]
}
为了让我们的打包变得更加清晰,我们可以在webpack.config.js
中把source-map
配置成none
,像下面这样:
module.exports = {
// 其他配置
mode: 'development',
devtool: 'none'
}
本次打包,我们需要使用npx webpack
,打包的结果如下图所示:
在以上的打包中,我们可以发现:
@babel/polyfill
中的代码全部都打包进了我们的代码中针对以上最后一个问题,我们希望,我们使用了哪些ES6
代码,就引入它对应的polyfill
包,达到一种按需引入的目的,要实现这样一个效果,我们需要在.babelrc
文件中做一下小小的改动,像下面这样:
npm i --save core-js@3
{
"presets": [["@babel/preset-env",{
"useBuiltIns": "usage",
"corejs": 3
}]]
}
同时需要注意的时,我们使用了useBuiltIns:"usage"
后,在index.js
中就不用使用import '@babel/polyfill'
这样的写法了,因为它已经帮我们自动这样做了。
在以上配置完毕后,我们再次使用npx webpack
进行打包,如下图,可以看到此次打包后,main.js
的大小明显变小了。