babel使用方法总结

1.在命令行中使用 Babel

Babel 官方推荐将 Babel 安装在本地，因为 Babel 的不同版本以及不同转码规则会起到不同的效果，全局安装会带来不必要的麻烦。在命令提示符中转到自己的项目目录下：

npm install --save-dev babel-cli

如果你之前出于某些原因执行了全局安装，可以通过下面的代码卸载全局范围的 Babel。放心，这并不会影响到项目路径下的本地安装。

npm uninstall --global babel-cli

光有一个 babel-cli 什么也做不了，我们还要为 Babel 安装语法插件。官方提供了几套预设的插件集合，分别适用于 ES2015、React 和 ES7 的一些实验性特性。只是为了学习 ES6 的语法的话，选 ES2015 就好了。

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

在项目根目录下创建一个.babelrc文件，注意这是个配置文件，以点号开头，没有后缀。Windows 系统是不允许直接创建这样格式的文件的，需要借助代码编辑器来新建文件。创建好后写入以下内容来启用预设：

{    //需要用到的套件
    "presets": ["es2015",'react'],//需要用到的插件
    "plugins": []
}

至此，我们就完成了 babel-cli 的安装，可以开始使用了。

2.Mac 和 Linux 的胜利

对于 Mac 和 Linux 用户，直接打开 Terminal 并切换到项目文件所在位置，就可以开始用了。下面的命令会将转码结果输出到 Terminal 的标准输出中：

babel es6.js

当然更多的时候我们是希望把结果放入文件中的：

babel es6.js -o es6-babeled.js

还有更牛的，Babel 支持实时转码，执行下面的命令后，任何对 ES6 代码的修改，保存之后都会自动转码，无需人工再干预。（完成后用 Ctrl+C/Command+C 结束）

babel es6.js --watch -o es6-babeled.js

Babel 还能批量处理整个路径下的 JS 文件，下面的代码把 src 目录下的文件批量转码并放到 lib 目录下：

babel src -d lib

还可以从 Terminal 的标准输入中读取文件进行转码：

babel -o es6-babeled.js < es6.js

官方还有一个更推荐的方法，在package.json文件中的scripts属性中添加一项"build": "babel src -d build"，之后只要在项目根目录执行npm run build，Babel 就会自动将src目录下的 js 文件自动转码并放入build目录下。

3.Windows 的悲哀

Windows 用户很快就会会发现babel命令根本用不了，系统不识别这个命令。检查一下环境变量你就会发现，根本没有相关的路径在里面。如果你执行过全局安装的话，会在 Node.js 的安装目录下的 node_global 目录下看到一个 babel.cmd 文件，把这个路径添加到环境变量中，就能用了。如果细看一下文件的内容，你就会发现奥秘所在。

@IF EXIST "%~dp0node.exe" (
    "%~dp0node.exe"  "%~dp0node_modulesbabel-clibinbabel.js" %*
) ELSE (
    @SETLOCAL
    @SET PATHEXT=%PATHEXT:;.JS;=;%
    node  "%~dp0node_modulesbabel-clibinbabel.js" %*
)

这个文件实际上是先检查 node.exe 是否存在，若存在，则执行node .node_modulesbabel-clibinbabel.js并接受后续的参数。这么一看就明白了，说白了 babel 的命令行工具本质是个 js 文件，需要用node来运行。照这个思路，我们只需要在项目的根目录下自行添加一个babel.cmd文件，并写入以下内容，就能使用项目里的babel命令了。

node .node_modulesbabel-clibinbabel.js %*

当然，用这个方法的前提是你需要配置好 Node.js 的环境，并且用 npm 安装好了 babel-cli，否则会报错说文件不存在。
之后的用法就和 Mac 和 Linux 下的一样了，看前面就好，不赘述了。

4.babel其他常用

babel-node
babel-node 是随 babel-cli 一起安装的另一款命令行工具，是一个模拟 Node.js 环境的 REPL（Read-Evel-Print Loop，一种循环执行“读取-执行-输出”的程序）。执行babel-node会进入一个类似 Node.js 的环境，在这里你可以直接运行 ES6 的代码。你也可以用形如babel-node es6.js的命令来直接运行用 ES6 编写的文件，babel-node 会在运行代码之前先将其编译成 ES5 的等效代码，然后执行。
甚至可以改写package.json文件，用 babel-node 替代 node 命令来直接运行。

{

"scripts": {
    "script.js": "babel-node script.js"    // 需替换成实际文件名
}

}

此时执行npm run script.js就等同于执行babel-node script.js

babel-core
这是 Babel 的核心 API 所在，在项目中加载该模块var babel = require("babel-core");，然后就可以通过babel.transform(code,options)方法来执行转码，code是待转码的 ES6 代码字符串，options提供了一些转码说明，例如指定语法规则、启用一些插件、设定编码等，具体用法可以参考这里。

babel-polyfill
Babel 默认只转码 ES6 的新语法（syntax），而不转换新的API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign、Array.from）都不会转码。如果想让这写方法运行，必须require("babel-polyfill")。

babel-doctor
看名字就知道，这个工具大概是排错用的。没错，如果在命令行中执行babel命令有问题的，可以用babel-doctor命令检查一下环境配置是否正确。主要检查以下几项内容：
o 项目根目录下是否存在.babelrc文件
o 是否有重复的Babel版本，例如同时安装了 Babel 5 和 Babel 6
o 所有已安装的 Babel 工具是否升级到了最新版
o npm 的版本是否大于等于 3.3.0
在 Node.js 中使用 Babel
在 Node.js 环境中，可以直接在 js 文件里调用 Babel 的转码功能。
babel-register
该模块给require()加上一个钩子，加载它之后，每当再 require 其他 js、jsx、es、es6 类型的文件，就会先用 Babel 进行转码。需要注意的是，使用该模块的文件本身并不会被转码，需要从外部执行转码。另外由于是实时转码，从效率上考虑不适用与生产环境，仅供学习研究使用。

5.在浏览器中使用 Babel

在命令行中使用 Babel 虽然在功能性上没得挑，但操作起来多少有点麻烦。Babel 提供了一种可以在浏览器中使用的方法，只需两步就能一劳永逸。这个方法唯一的缺点就是实时转码需要时间，性能上不及预先转换的方案，因此生产环境中不推荐使用，仅供学习研究使用。
首先我们需要下载browser.js，注意，这是 Babel 5 的版本，Babel 6 开始不再直接提供该文件，需要自行构建。
除了从上面的链接下载，你也可以用 npm 下载：

npm install babel-core@5

下载后在node_modules/babel-core子目录中就能找到browser.js文件。
使用方法如下：

<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel" src="your_own_es6_file.js"></script>

有两点需要注意

1. browser.js 文件必须放在你自己的 js 文件之前

2. 你自己的文件的类型要写成type="text/babel"

6.在线试用 Babel

有时候我们并不需要在项目中操作什么，纯粹就想看看 Babel 到底做了什么。为此 Babel 官方提供了一套在线的REPL (Read-Eval-Print-Loop)，可以方便的试用 Babel。

7.配合使用

1.Webpack用法

(1). 安装babel-loader

npm install babel-loader babel-core --save -dev

(2).

配置loader
     module: {
       loaders: [{
           test: /.js$/,exclude: /node_modules/,loader: "babel-loader"
       }]

}

(3).配置.babelrc文件

{
       "presets": [
           // 需要用到的套件
       ],"plugins": [
           // 需要用到的插件
       ]
 }

注意：要配置好.babelrc文件

2.Gulp用法

(1).安装gulp-babel

npm install gulp-babel --save -dev

2.定义task

(1)

var gulp = require("gulp");
     var babel = require("gulp-babel");
    
     gulp.task("default",function () {
       return gulp.src("src/app.js")
         .pipe(babel())
         .pipe(gulp.dest("dist"));
 });

(2)配置.babelrc文件

{
       "presets": [
           // 需要用到的套件
       ],"plugins": [
       // 需要用到的插件
       ]
 }

(3)Babel套件与插件

3-1:适用于ES6的套件: babel-preset-es2015

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

.babelrc

{
    "presets": ["es2015"]
}

babel-preset-react

3-2:适用于React的套件:babel-preset-react

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

.babelrc

{
    "presets": ["react"]
}

3-3:object-assign
适用于Object.assign()
举例

var obj = { a: 1 };
var copy = Object.assign({},obj);
console.log(copy); // { a: 1 }

安装

npm install babel-plugin-transform-object-assign

.babelrc

{
  "plugins": ["transform-object-assign"]
}

3-4:object-rest-spread
适用于展开运算符
举例

var arr1 = [0,1,2];
    var arr2 = [3,4,5];
    arr1.push(...arr2);

安装

npm install babel-plugin-transform-object-rest-spread

.babelrc

{
  "plugins": ["transform-object-rest-spread"]
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!