Babel介绍 #

Babel 是一个通用的多用途 JavaScript 编译器
Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。

1.babel的安装 #

1.1 安装全局的babel #

$ npm install --global babel-cli

1.2 查看babel的帮助 #

$ babel --help

2.babel的使用 #

2.1 编译单独文件 #

$ babel a.js --out-file b.js
# 或
$ babel a.js -o b.js

2.2 编译文件夹 #

$ mkdir src build
$ babel src --out-dir build

仅仅是简单的拷贝

3.使用本地babel #

初始化package.json

3.1 安装babel #

npm install --save-dev babel-cli

3.2 在package.json中使用本地babel #

"scripts": {
    "babel": "babel src --out-dir build"
},

4.配置babel #

4.1 创建.babelrc文件 #

$ touch .babelrc

4.2 安装常用的预设 #

4.2.1 解析es6 #

$ npm install --save-dev babel-preset-es2015

4.2.2 解析react #

$ npm install --save-dev babel-preset-react

4.2.3 解析es7的不同版本 #

$ npm install --save-dev babel-preset-stage-x

4.3 配置.babelrc #

{
  presets: ["es2015"] //es2015为es6的预设
}

4.4 编译es6 #

$ babel src --out-dir build

5.babel与webpack结合 #

5.1 安装loader #

$ npm install babel-loader --save-dev

5.2 配置loader #

    loaders:[
+       {test:/.js$,loader:'babel-loader'/}
    ]

5.3 解析es6api #

$ npm install --save-dev babel-polyfill

6.代码整洁 #

由于助手方法可能会特别长并且会被添加到每一个文件的顶部，因此你可以把它们统一移动到一个单一的“运行时（runtime）”中去。

6.1安装runtime #

$ npm install --save-dev babel-plugin-transform-runtime
$ npm install --save babel-runtime

6.2更改.babelrc #

  {
    "plugins": [
+     "transform-runtime",
    ]
  }

7.babel编译loose模式 #

7.1安装插件 #

npm install --save-dev babel-plugin-transform-es2015-classes

7.2定义宽松模式 #

  {
    "plugins": [
+     ["transform-es2015-classes", { "loose": true }]
    ]
  }