【webpack：loader】Babel

babel介绍

1. Babel 是一个 JavaScript 编译器，能够把ES6的语法转为兼容浏览器的ES5语法；
2. Babel能够单独使用，可是通常都是和webpack结合一块儿使用
3. 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 浏览器前缀。

三种方式去配置：

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

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

2. 在package.json 里面增长以下配置

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

3. 在工程的根目录下存在.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的话，还要在入口文件中引入

---

@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：

---

学习参考

Babel中文文档

你真的会用 Babel 吗?

babel-polyfill & other

21 分钟精通前端 Polyfill 方案

Babel V7 学习总结

babel入门到精通

webpack配合babel使用