babel基础配置

babel

标签（空格分隔）： babel

---

babel

• Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
• Babel 会在正在被转录的文件的当前目录中查找一个 .babelrc 文件。 如果不存在，它会遍历目录树，直到找到一个 .babelrc 文件，或一个 package.json 文件中有 "babel": {}
• babel6将babel全家桶拆分成了许多不同的模块(rc是run command的缩写)

依赖

babel-loader：使用es6或加载模块时，对es6代码进行预处理，转为es5语法。
babel-core：允许我们去调用babel的api，可以将js代码分析成ast（抽象语法树），方便各个插件分析语法进行相应的处理.
babel-preset-env：推荐preset，比如es2015，es2016，es2017，latest，env（包含前面全部）
babel-polyfill：它效仿一个完整的ES2015+环境，使得我们能够使用新的内置对象比如 Promise，比如 Array.prototype.includes 和生成器函数（提供给你使用 regenerator 插件）。为了达到这一点， polyfill 添加到了全局范围，就像原生类型比如 String 一样。
babel-runtime babel-plugin-transform-runtime：这个插件能自动为项目引入polyfill和helpers

presets

• babel5会默认转译ES6和jsx语法，babel6转译的语法都要在perset中配置，preset简单说就是一系列plugin包的使用。
• 预设就是一系列插件的集合，把之前的参数保存为一个预设，下次就能直接使用。
• 基础配置如下：（设置转码规则和插件）

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

• presets字段设定转码规则，官方提供以下的规则集，按需安装。
• 可以看到提案在进入stage3阶段时就已经在一些环境被实现，在stage2阶段有babel的实现。

# ES2015转码规则
babel-preset-es2015
# react转码规则
babel-preset-react
# ES7不同阶段语法提案的转码规则（共有4个阶段）
babel-preset-stage-0
babel-preset-stage-1: draft - 必须包含2个实验性的具体实现，其中一个可以是用转译器实现的，例如Babel。
babel-preset-stage-2: candidate - 至少要有2个符合规范的具体实现。
babel-preset-stage-3

配置：

{
    "presets": [
      "es2015",
      "stage-2"
    ],
    "plugins": []
  }

babel-preset-env

此段内容来自于babel到底该如何配置？

• 上面这些preset官方现在都已经不推荐了,官方唯一推荐preset：babel-preset-env
• 这款preset能灵活决定加载哪些插件和polyfill

// cnpm install -D babel-preset -env
{
    "presets": [
        ["env", {
            "targets": { //指定要转译到哪个环境
                //浏览器环境
                "browsers": ["last 2 versions", "safari >= 7"],
                //node环境
                "node": "6.10", //"current"  使用当前版本的node
                
            },
             //是否将ES6的模块化语法转译成其他类型
             //参数："amd" | "umd" | "systemjs" | "commonjs" | false，默认为'commonjs'
            "modules": 'commonjs',
            //是否进行debug操作，会在控制台打印出所有插件中的log，已经插件的版本
            "debug": false,
            //强制开启某些模块，默认为[]
            "include": ["transform-es2015-arrow-functions"],
            //禁用某些模块，默认为[]
            "exclude": ["transform-es2015-for-of"],
            //是否自动引入polyfill，开启此选项必须保证已经安装了babel-polyfill
            //参数：Boolean，默认为false.
            "useBuiltIns": false
        }]
    ]
}

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

plugins

此段内容来自于babel到底该如何配置？

• babel中的插件，通过配置不同的插件才能告诉babel，我们的代码中有哪些是需要转译的。
• 插件官网

{
    "plugins": [
        ["transform-es2015-arrow-functions", { "spec": true }]
    ]
}

• transform-runtime,这个插件能自动为项目引入polyfill和helpers
• polyfill作用是用已经存在的语法和api实现一些浏览器还没有实现的api，对浏览器的一些缺陷做一些修补。例如Array新增了includes方法，但是低版本的浏览器上没有，就得做兼容处理
• transform-runtime这个插件依赖于babel-runtime

babel-runtime由三个部分组成：

core-js
core-js极其强悍，通过ES3实现了大部分的ES5、6、7的polyfill。
regenerator
regenerator来自facebook的一个库，用于实现 generator functions。
helpers
babel的一些工具函数，这个helpers和使用babel-external-helpers生成的helpers是同一个东西

• 配置transform-runtime

{
    "plugins": [
        ["transform-runtime", {
            "helpers": false, //自动引入helpers
            "polyfill": false, //自动引入polyfill（core-js提供的polyfill）
            "regenerator": true, //自动引入regenerator
        }]
    ]
}

比较transform-runtime与babel-polyfill引入垫片的差异：

使用runtime是按需引入，需要用到哪些polyfill，runtime就自动帮你引入哪些，不需要再手动一个个的去配置plugins，只是引入的polyfill不是全局性的，有些局限性。而且runtime引入的polyfill不会改写一些实例方法，比如Object和Array原型链上的方法，像前面提到的Array.protype.includes。
babel-polyfill就能解决runtime的那些问题，它的垫片是全局的，而且全能，基本上ES6中要用到的polyfill在babel-polyfill中都有，它提供了一个完整的ES6+的环境。babel官方建议只要不在意babel-polyfill的体积，最好进行全局引入，因为这是最稳妥的方式。
一般的建议是开发一些框架或者库的时候使用不会污染全局作用域的babel-runtime，而开发web应用的时候可以全局引入babel-polyfill避免一些不必要的错误，而且大型web应用中全局引入babel-polyfill可能还会减少你打包后的文件体积（相比起各个模块引入重复的polyfill来说）。

结合ESLint

• 许多工具需要Babel进行前置转码，如ESLint和Mocha
• 在项目根目录下，新建一个配置文件.eslint，在其中加入parser字段。

{
  "parser": "babel-eslint",
  "rules": {
    ...
  }
}

• 在package.json之中，加入相应的scripts脚本

"scripts": {
  "lint": "eslint --ext .js,.vue src",
},

部分参考：
babel到底该如何配置？