Babel 入门教程

这意味着，你可以现在就用es6编写程序，而不用担心现有环境是否支持。下面是一个例子。

上面的原始代码用了箭头函数，这个特性还没有得到广泛支持，babel将其转为普通函数，就能在现有的javascript环境执行了。

babel的配置文件是<code>.babelrc</code>，存放在项目的根目录下。使用babel的第一步，就是配置这个文件。

该文件用来设置转码规则和插件，基本格式如下。

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

然后，将这些规则加入<code>.babelrc</code>。

注意，以下所有babel工具和模块的使用，都必须先写好<code>.babelrc</code>。

babel提供<code>babel-cli</code>工具，用于命令行转码。

它的安装命令如下。

基本用法如下。

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

一个解决办法是将<code>babel-cli</code>安装在项目之中。

然后，改写<code>package.json</code>。

转码的时候，就执行下面的命令。

<code>babel-cli</code>工具自带一个<code>babel-node</code>命令，提供一个支持es6的repl环境。它支持node的repl环境的所有功能，而且可以直接运行es6代码。

它不用单独安装，而是随<code>babel-cli</code>一起安装。然后，执行<code>babel-node</code>就进入pepl环境。

<code>babel-node</code>命令可以直接运行es6脚本。将上面的代码放入脚本文件<code>es6.js</code>，然后直接运行。

<code>babel-node</code>也可以安装在项目中。

上面代码中，使用<code>babel-node</code>替代<code>node</code>，这样<code>script.js</code>本身就不用做任何转码处理。

<code>babel-register</code>模块改写<code>require</code>命令，为它加上一个钩子。此后，每当使用<code>require</code>加载<code>.js</code>、<code>.jsx</code>、<code>.es</code>和<code>.es6</code>后缀名的文件，就会先用babel进行转码。

使用时，必须首先加载<code>babel-register</code>。

然后，就不需要手动对<code>index.js</code>转码了。

需要注意的是，<code>babel-register</code>只会对<code>require</code>命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。

如果某些代码需要调用babel的api进行转码，就要使用<code>babel-core</code>模块。

安装命令如下。

然后，在项目中就可以调用<code>babel-core</code>。

下面是一个例子。

上面代码中，<code>transform</code>方法的第一个参数是一个字符串，表示需要转换的es6代码，第二个参数是转换的配置对象。

babel默认只转换新的javascript句法（syntax），而不转换新的api，比如iterator、generator、set、maps、proxy、reflect、symbol、promise等全局对象，以及一些定义在全局对象上的方法（比如<code>object.assign</code>）都不会转码。

举例来说，es6在<code>array</code>对象上新增了<code>array.from</code>方法。babel就不会转码这个方法。如果想让这个方法运行，必须使用<code>babel-polyfill</code>，为当前环境提供一个垫片。

然后，在脚本头部，加入如下一行代码。

babel也可以用于浏览器环境。但是，从babel 6.0开始，不再直接提供浏览器版本，而是要用构建工具构建出来。如果你没有或不想使用构建工具，可以通过安装5.x版本的<code>babel-core</code>模块获取。

运行上面的命令以后，就可以在当前目录的<code>node_modules/babel-core/</code>子目录里面，找到<code>babel</code>的浏览器版本<code>browser.js</code>（未精简）和<code>browser.min.js</code>（已精简）。

然后，将下面的代码插入网页。

上面代码中，<code>browser.js</code>是babel提供的转换器脚本，可以在浏览器运行。用户的es6脚本放在<code>script</code>标签之中，但是要注明<code>type="text/babel"</code>。

注意，网页中实时将es6代码转为es5，对性能会有影响。生产环境需要加载已经转码完成的脚本。

下面是如何将代码打包成浏览器可以使用的脚本，以<code>babel</code>配合<code>browserify</code>为例。首先，安装<code>babelify</code>模块。

然后，再用命令行转换es6脚本。

上面代码将es6脚本<code>script.js</code>，转为<code>bundle.js</code>，浏览器直接加载后者就可以了。

在<code>package.json</code>设置下面的代码，就不用每次命令行都输入参数了。

许多工具需要babel进行前置转码，这里举两个例子：eslint和mocha。

然后，在项目根目录下，新建一个配置文件<code>.eslint</code>，在其中加入<code>parser</code>字段。

再在<code>package.json</code>之中，加入相应的<code>scripts</code>脚本。

上面命令中，<code>--compilers</code>参数指定脚本的转码器，规定后缀名为<code>js</code>的文件，都需要使用<code>babel-core/register</code>先转码。

（完）