webpack之babel

1、下一代 JavaScript 语法的编译器

• 使用理念：通过组合，实现所有功能

工作流

• 解析
• 转换
• 生成

---

常用的组合项

• babel-loader ：装载源码，如果没有其它配置，则原样输出
• babel-core：用于解析和转换的核心库，babel-loader的依赖项：包括transformation，file，tools，helpers等
• babel-external-helpers：默认情况下，某些转换需要其他函数的支持，此时，其它函数放在使用的前面。会造成，该函数会出现很多。babel-external-helpers就是为了把这些其它函数，提取出来，然后采用引用。相当于对helpers库的优化。
• preset：预设，即官方提供的一些组合项的套餐。主要是针对语法方面的。如babel-preset-env

---

• 除了预设的，还可以使用一些非预设的。
• babel-polyfill:垫片，添加方法在对象的原型上面。提供原生es5+环境。缺点是原型上面容易冲突
• babel-runtime：babel-core转化部分的加强。此时，转化部分，有babel-runtime来把控
• babel-plugin-transform-runtime：类似babel-external-helpers，配合babel-runtime使用。此时，分析用到了babel-runtime中的方法，则在顶部加入引入。我们也可以手动引入该子库。

---

配置

• 最好配置在.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}