babel是什么鬼

Babel is a JavaScript compiler
babel主要的职责就是将一些前沿时髦的JS特性通过"翻译"用到老旧的‘宿主’环境里。(浏览器，Node等)

babel的正确打开方式

babel-cli

利用babel命令行工具来进行对应的文件进行"翻译"。

npm install --save-dev babel-cli

可以在CLI中直接将指定的文件进行编译。

babel script.js

.babelrc

.babelrc又是什么东东

如果一个项目中需要用到babel打包工具，此时.babelrc就是存放在项目根目录下的babel的配置文件。这种方式用于前端项目自己维护webpack/webpackDevServer。(这个文件是为前端服务器使用的)
e.g.
webpack配置文件中获取babel的配置信息。（下面的配置文件有省略）

// 引入babel文件，对react项目进行运行时监测
var babelrc = fs.readFileSync('./.babelrc');
module.exports = {
devtool：{},
context:{},
entry:{},
output:{},
 module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelrc),]}]
      }

package.json

在对应的项目的package.json的babel中指定对应的babel配置信息。

"babel": {
    "presets": [
      "react-app"
    ]
  },

配置规格和.babelrc是一样的

常用参数

env

使用env来对指定的环境配置转码规格。

{
  "env": {
   "development": {
      "plugins": [
        "typecheck",
        ["react-transform", {
            "transforms": [{
                "transform": "react-transform-catch-errors",
                "imports": ["react", "redbox-react"]
              }
            ]
        }]
      ]
    }，
    "production": {  
        "plugins": ["transform-react-constant-elements"]
    }
  }
}

该参数一般都是指定类似于catch-errors这类的plugins。

变量的使用

该变量会被WebpackDevServer的配置文件获取，从而根据production或者development来定义WebpackDevServer的行为。

presets

presets用来定义转码规则。

"presets": ["react", "es2015", "stage-0"]

或者按照官方的推荐的一种一劳永逸的方法

npm install babel-preset-env --save-dev
//.babelrc中配置
{
  "presets": ["env"]
}

Without any configuration options, babel-preset-env behaves exactly the same as babel-preset-latest (or babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017 together).

有时候需要根据宿主环境的不同，来决定是否采用转码。所以需要额外的指定target

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
        //这里也可以指定Node的信息
        //"node": "6.10"
      }
    }]
  ]
}

plugins

来配置一些插件用于babel的transform阶段来使用。所以在plugins中常见得plugins都是带transform前缀的。

"plugins": [
        "transform-runtime",
        "transform-class-properties",
        "syntax-object-rest-spread"
    ]

这里需要额外的提示一下transform-runtime。在定义公共库的时候，很有用。

babel的底层知识

Babel在转码的过程中也会存在"生命周期"。parsing/transforming/generation。或者说编译器都存在这个三个周期。如何实现一个编译器了解一下

与babel的"孽缘"