babel笔记以及.babelrc相关配置

2017-3-20    分类: mac,nodejs笔记

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