ES6-环境部署

1.部署进度

运行下面命令可以查看正在使用的Node环境对ES6的支持程度。

 

$ npm install -g es-checker
$ es-checker

2.Babel 转码器

 

Babel是一个广泛使用的ES6转码器，可以将ES6代码转化为ES5代码，从而在现有的环境执行。

 

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

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

上面的原始代码用了简体函数，Babel将其转化为普通函数，就能在不支持箭头函数的JavaScript环境中执行了。
1）在安装Babel之前，需要用npm init 先初始化我们的项目，打开命令行工具，进入项目，输入以下命令：

 

 

 

$ npm init -y

2）配置文件 .babelrc
Babel 的配置文件是 .babelrc ，存放在根目录下（自己手动创建）。该文件的基本基本格式如下：

 

 

 

{
  "presets": [],
  "plugins": []
}

presets 字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

 

 

# 最新转码规则
$ npm install --save-dev babel-preset-latest

# react 转码规则
$ npm install --save-dev babel-preset-react

# 不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

安装之后将这些规则加入 .babelrc 中：

 

{
    "presets": [
      "latest",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

3）命令行转码babel-cli
babel-cli工具用于命令行转码，暗转命令如下：

 

$ npm install --global 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

上面代码是在全局环境下，进行 Babel 转码。这意味着，如果项目要运行，全局环境必须有 Babel，也就是说项目产生了对环境的依赖。另一方面，这样做也无法支持不同项目使用不同版本的 Babel。一个解决办法是将babel-cli安装在项目之中。

 

# 安装
$ npm install --save-dev babel-cli

4）改写package.json

 

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

这时候转码就需要输入:npm run build