babel笔记以及.babelrc相关配置

Babel是一个转化器，将es6代码转化成es5。也就是说你可以放心大胆的写es6的语法不必考虑兼容性，
Babel可以将你的代码转化成兼容性好的es5代码。

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
 return item + 1;
});

上面的原始代码用了箭头函数，这个特性还没有得到广泛支持，Babel将其转为普通函数，就能在现有的JavaScript环境执行了。

配置.babelrc

要使用Babel转码前要对.babelrc脚本进行配置：

{
   "presets": [
      "stage-3",
      "es2015"
    ],
    "plugins": [
      [
       "transform-runtime",
         {
            "polyfill": false,
            "regenerator": true
         }
      ]
    ]
}

以下方法选择其中一种即可，但前提是要配置好.babelrc

方法一：

//将指定目录或者文件转码

安装：

npm install --save-dev babel-cli

基本用法如下：

# 转码结果输出到标准输出
 $ babel example.js

 # 转码结果写入一个文件
 # --out-file 或 -o 参数指定输出文件
 $ babel example.js --out-file compiled.js
 # 或者
 $ babel example.js -o compiled.js

 # 整个目录转码
 # --out-dir 或 -d 参数指定输出目录
 $ babel src --out-dir lib
 # 或者
 $ babel src -d lib

 # -s 参数生成source map文件
 $ babel src -d lib -s

编辑：package.json

{
  // ...
  "devDependencies": {
     "babel-cli": "^6.0.0"
  },
  "scripts": {
     "build": "babel src -d lib" //将src目录下的所有js文件转码输出到lib目录下
  },
 }

执行命令

npm run build

方法二：

//也可以不需要转码，让代码运行在支持es6的环境中运行
安装在当前项目目录下：

npm install --save-dev babel-cli

要让代码能跑在es6的环境中就需要babel-node，它不用单独安装，而是随babel-cli一起安装。然后，执行babel-node就进入PEPL环境。

babel-node es6.js //让es6.js代码在es6环境中运行

编辑package.json

{
  "scripts": {
    "start": "babel-node ./bin/www"
  }
}

启动命令：

npm run start

方法三：

//每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用Babel进行转码。

npm install --save-dev babel-register

以express支持async/await、promise为例，在bin目录下新建1.js内容为：

require("babel-register");
require('./www');

以后启动express时候就运行

node ./bin/1.js即可

http://www.ruanyifeng.com/blog/2016/01/babel.html

http://www.kancloud.cn/digest/babel/217104