webpack4入门学习笔记(三)--Babel的使用

系列博客链接

• webpack4入门学习笔记(一)
• webpack4入门学习笔记(二)
• webpack4入门学习笔记(三)--Babel的使用

代码

下载代码(demo3)：github

本文的代码是在前面笔记基础上修改的，可以下载代码：github参考或是先看前面的笔记。

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

Babel总共分为三个阶段：解析（parse），转换（transform），生成（generate）。

Babel本身不具有任何转化功能，它把转化的功能都分解到一个个plugin里面。因此当我们不配置任何插件时，经过Babel输出的代码和输入是相同的。

Babel插件的使用

1. 将插件的名字增加到配置文件中:项目根目录下创建.babelrc配置文件或是webapck.config.js中配置，一般都是在.babelrc中配置。

2. 使用 npm install xxx 进行安装

Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。

该文件用来设置转码规则和插件，基本格式如下。

{
  \"presets\": [],
  \"plugins\": []
}

Babel简单介绍

preset

preset（预设）就是一系列插件的集合
@babel/preset-env包含所有ES6转译为ES5的插件集合

core-js

转换一些内置类(Promise, Symbols等等)和静态方法(Array.from等)。

@babel/core

是作为Babel的核心存在，Babel的核心api都在这个模块里面。

babel-loader

babel-loader在webpack中使用，是webpack和Babel之间的通讯桥梁

@babel/polyfill介绍

@babel/preset-env默认只转译js语法，而不转译新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法(比如Object.assign)都不会转译。这时就必须使用@babel/polyfill(内部集成了core-js和regenerator)。

使用时，在所有代码运行之前增加import \"@babel/polyfill\"

或者是在webpack.config.js入口配置

module.exports = {
  entry: [\"@babel/polyfill\", \"./app/js\"],
}

因此必须把@babel/polyfill作为dependencies而不是devDependencies

@babel/polyfill主要有两个缺点：

1.使用@babel/polyfill需要做些额外配置，实现打包的时候按需引入，否则会把@babel/polyfill全部注入代码中会导致打出来的包非常大。

2.@babel/polyfill会污染全局变量。

Babel7的一个重大变化就是npm package 名称的变化，把所有babel-*重命名为@babel/*，例如：

• babel-polyfill重命名为@babel/polyfill
• babel-preset-env重命名为@babel/preset-env

Babel在webpack中的用法

首先实现对ES6语法的转译

安装babel-loader、 @babel/core、@babel/preset-env

• npm i babel-loader -D
• npm i @babel/core -D
• npm i @babel/preset-env -D

babel-loader@8需要安装@babel/core7.x版本。

在webpack.config.js配置

module.exports={
  module: {
    rules:[
      {
        test: /\\.js$/,
        exclude: /node_modules/,
        use:{
          loader: \'babel-loader\',         
          options:{
            presets: [
              [\"@babel/preset-env\",{
                //targets：表示编译出的代码想要支持的浏览器版本
                targets: {
                  chrome: \"67\"                 
                }
              }]
            ]
          }
        }
      }
    ]
  }
}

执行npm run build或npx webpack就可以看到dist目录下的打包文件，但是只是将ES6的语法进行转译，并没有对ES6新API进行转译，所以我们需要配置@babel/polyfill解决这个问题。

安装@babel/polyfill
npm i @babel/polyfill --save

在index.js中引入@babel/polyfill

index.js

//index.js

import \'@babel/polyfill\'

let arr=[
  new Promise(()=>{}),
  new Promise(()=>{}),
  2
]

arr.map((item)=>{
  console.log(item)
})

引入@babel/polyfill前，main.js的大小为29.5KB

引入@babel/polyfill后，main.js的大小为1MB

注意：以上对比都是在没有targets这个选项的情况下，因为有些浏览器几乎都支持ES6，在这种情况下，@babel/preset-env将不会对代码进行处理。

这是因为把@babel/polyfill对所有API的实现都注入到打包文件中，但是里面很多的API我们在代码中并没有用到，所以需要修改配置，按需引入对应的API。

修改webpack.config.js配置

添加\"useBuiltIns\": \"usage\"以后，需要安装core-js@2，并且添加\"corejs\": 2配置项，这时配置选项比较多，需要在项目根目录下新建.babelrc文件，在这个文件中配置。

.babelrc配置如下：

• \"useBuiltIns\"属性值为\"usage\"时，会自动引入@babel/polyfill，必须保证已经安装了@babel/polyfill

• \"useBuiltIns\"属性值为\"usage\"时，需要添加\"corejs\": 2配置项，否则报错，需要安装core-js

首先删掉index.js中的import \'@babel/polyfill\'

安装core-js
npm i --save core-js@2或npm i --save core-js@3

{
  \"presets\": [[\"@babel/preset-env\",{
    \"useBuiltIns\": \"usage\", //不需要把polly都打包到代码中，根据代码按需转译
    // core-js@３和core-js@２二选一
    //\"corejs\": 3,  //npm i --save core-js@３
    \"corejs\": 2  //npm i --save core-js@2
  }]]
}

修改webpack.config.js，删除options对象

module.exports={
  module: {
    rules:[
      {
        test: /\\.js$/,
        exclude: /node_modules/,
        loader: \'babel-loader\'
      }
    ]
  }
}

执行npm run build，打包后的文件大小为165KB

但是，在开发类库或是第三方模块时不适合使用@babel/polyfill，所以接下来使用@babel/plugin-transform-runtime来解决这个问题。

@babel/plugin-transform-runtime、@babel/runtime和@babel/runtime-corejs2的用法

@babel/runtime-corejs2：是一个包含Babel modular runtime helpers和regenerator-runtime以及core-js的库。

@babel/runtime：是一个包含Babel modular runtime helpers和regenerator-runtime的库。

在配置项中corejs属性值为默认为false，如果需要将Promise等API进行转译，则需要设置属性值为2时，并且安装@babel/runtime-corejs2

安装：

• npm i @babel /plugin-transform-runtime -D
• npm i --save @babel/runtime
• npm i --save @babel/runtime-corejs2

修改.babelrc文件

{
  \"plugins\": [
    [\"@babel/plugin-transform-runtime\",{
      \"helpers\": true,
      \"regenerator\": true,
      \"useESModules\": false,
      \"corejs\": 2
    }]
  ]
}

我们把presets配置项去掉了，然后npm run build打包，打开打包后的main.js查看，虽然把转译了Promise，但是ES6新语法并没被转译，例如：let没有被转译为var。

所以还是需要配置presets，因为\"@babel/preset-env\"包含了对所有ES6语法转译为ES5插件。

再次修改.babelrc文件

{
　\"presets\": [\"@babel/preset-env\"],
  \"plugins\": [
    [\"@babel/plugin-transform-runtime\",{
      \"helpers\": true,
      \"regenerator\": true,
      \"useESModules\": false,
      \"corejs\": 2
    }]
  ]
}

添加presets配置项，然后npm run build打包，打开打包后的main.js查看，可以看到let和箭头函数都被转译为ES5语法了。