安装es6编译babel

16 阅读1分钟

1、它的安装命令如下。

全局安装 :$ npm install --global babel-cli
项目下安装: $ npm install -g babel-cli --save-dev

2、配置.babelrc文件

 这个文件配置的是编译es6的规则,配置如下:

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

3、转码规则:

# 转码结果输出到标准输出
$ 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

实时监测es6文件

  babel ECAMscript2015.js --watch -o ECAMscript20151.js

上面代码是在全局环境下,进行 Babel 转码。这意味着,如果项目要运行,全局环境必须有 Babel,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的 Babel。

4、用npm init 创建package.json,修改其配置如下:

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
  "author": "",
  "license": "ISC"
}

5、执行

$ npm run build
就能转译啦