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究竟该怎样设置？