【webpack：loader】Babel

2019-08-27 本文已影响0人前端菜篮子

`babel`介绍

Babel 是一个 JavaScript 编译器，可以把ES6的语法转为兼容浏览器的ES5语法；
Babel可以单独使用，但是一般都是和webpack结合一起使用
webpack里使用babel最基本的几个包：babel-loader、 babel-core 、babel-preset-env 、babel-polyfill

`@babel/core`

@babel/core包括了整个babel的工作流（输入字符串 -> @babel/parser parser -> AST -> transformer[s] -> AST -> @babel/generator -> 输出字符串），是babel的核心包。
可以看做 babel 的编译器。babel 的核心 api 都在这里面，比如 transform，主要都是处理转码的。它会把我们的 js 代码，抽象成 ast，即 abstract syntax tree 的缩写，是源代码的抽象语法结构的树状表现形式。
我们可以理解为，它定义的一种分析 js 语法的树状结构。也就是说 es6 的新语法，跟老语法是不一样的，那我们怎么去定义这个语法呢。所以必须要先转成 ast，去发现这个语法的 kind，分别做对应的处理，才能转化成 es5.

`@babel/preset-env`

Babel插件一般尽可能拆成小的力度，开发者可以按需引进。比如对ES6转ES5的功能，Babel官方拆成了20+个插件。
这样的好处显而易见，既提高了性能，也提高了扩展性。比如开发者想要体验ES6的箭头函数特性，那他只需要引入transform-es2015-arrow-functions插件就可以，而不是加载ES6全家桶。
但很多时候，逐个插件引入的效率比较低下。比如在项目开发中，开发者想要将所有ES6的代码转成ES5，插件逐个引入的方式令人抓狂，不单费力，而且容易出错。
这个时候，可以采用Babel Preset。
可以简单的把Babel Preset视为Babel Plugin的集合。
这个 preset 真是神器啊，它能根据当前的运行环境，自动确定你需要的 plugins 和 polyfills。
Plugin与Preset执行顺序：可以同时使用多个Plugin和Preset，此时，它们的执行顺序非常重要。先执行完所有Plugin，再执行Preset。多个Plugin，按照声明次序顺序执行。多个Preset，按照声明次序逆序执行。

`browserslist`

browserslist指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

三种方式去配置：

在.babelrc或者babel.config.js中去配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "4",
          "chrome": "58",
          "ie": "11"
        }
      }
    ]
  ]
}

在package.json 里面增加如下配置

{
  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ]
}

在工程的根目录下存在.browerslistrc配置文件

last 1 version
> 1%
maintained node versions
not dead

除了browserslist,另外还要在webpack.config.js中配置babel-loader

 module: {
    rules: [
      {  ...其他loader...},
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      }
    ]
}

package.json中也要配置相关的依赖

"dependencies": {
    "babel-polyfill": "^6.26.0",
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.3.2",
  },

要用@babel/polyfill的话，还要在入口文件中引入

image

`@babel/polyfill`&`runtime`&`core-js`

Babel默认只转换新的JavaScript语法（syntax），如箭头函数等，而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码；所以光是使用@babel/preset-env是不够的，我们还需要polyfill；
@babel/polyfill ——让目标浏览器支持所有特性，不管它是全局的，还是原型的，或是其它。这样，通过 @babel/polyfill，不同浏览器在特性支持上就站到同一起跑线。但是这样做也有一个缺点，就是会污染全局变量，而且项目打包以后体积会增大很多，因为把整个依赖包也搭了进去。所以并不推荐在一些方法类库中去使用。
@babel/preset-env下有一个选项useBuiltIns，用于指导 @babel/preset-env 如何触发 polyfills.useBuiltIns有三个可能的值 usage | entry | false。usage：根据实际项目中真正使用到的有需要兼容的polyfill添加进去
@babel/runtime：
@babel/runtime-corejs2：