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实现了大部分的ES五、六、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到底该如何配置？