@@ -127,6 +127,16 @@ input.map(function (item) {
127127
128128``` bash
129129$ npm install --global babel-cli
130+ $ npm install --save babel-preset-es2015
131+ ```
132+
133+ 然后在当前目录下,新建一个配置文件` .babelrc ` 。
134+
135+ ``` javascript
136+ // .babelrc
137+ {
138+ " presets" : [' es2015' ]
139+ }
130140```
131141
132142Babel自带一个` babel-node ` 命令,提供支持ES6的REPL环境。它支持Node的REPL环境的所有功能,而且可以直接运行ES6代码。
@@ -181,10 +191,10 @@ $ babel -d build-dir source-dir -s
181191
182192### 浏览器环境
183193
184- Babel也可以用于浏览器。它的浏览器版本,可以通过安装 ` babel-core ` 模块获取。
194+ Babel也可以用于浏览器。但是,从Babel 6.0开始,不再直接提供浏览器版本,而是要用构建工具构建出来。如果你没有或不想使用构建工具,只有通过安装5.x版本的 ` babel-core ` 模块获取。
185195
186196``` bash
187- $ npm install babel-core
197+ $ npm install babel-core@5
188198```
189199
190200运行上面的命令以后,就可以在当前目录的` node_modules/babel-core/ ` 子目录里面,找到` babel ` 的浏览器版本` browser.js ` (未精简)和` browser.min.js ` (已精简)。
@@ -202,23 +212,27 @@ $ npm install babel-core
202212
203213这种写法是实时将ES6代码转为ES5,对网页性能会有影响。生产环境需要加载已经转码完成的脚本。
204214
205- ` Babel ` 配合` Browserify ` 一起使用,可以生成浏览器能够直接加载的脚本。
215+ 下面是` Babel ` 配合` Browserify ` 一起使用,可以生成浏览器能够直接加载的脚本。首先,安装` babelify ` 模块。
216+
217+ ``` bash
218+ $ npm install --save-dev babelify babel-preset-2015
219+ ```
220+
221+ 然后,再用命令行转换ES6脚本。
206222
207223``` bash
208- $ browserify script.js -t babelify --outfile bundle.js
224+ $ browserify script.js -o bundle.js \
225+ -t [ babelify --presets [ es2015 react ] ]
209226```
210227
211- 上面代码将ES6脚本` script.js ` ,转为` bundle.js ` 。浏览器直接加载后者就可以了,不用再加载 ` browser.js ` 。
228+ 上面代码将ES6脚本` script.js ` ,转为` bundle.js ` ,浏览器直接加载后者就可以了 。
212229
213230在` package.json ` 设置下面的代码,就不用每次命令行都输入参数了。
214231
215232``` javascript
216233{
217- // ...
218234 " browserify" : {
219- " transform" : [
220- [" babelify" , { " stage" : [0 ] }]
221- ]
235+ " transform" : [[" babelify" , { " presets" : [" es2015" ] }]]
222236 }
223237}
224238```
@@ -227,34 +241,63 @@ $ browserify script.js -t babelify --outfile bundle.js
227241
228242Node脚本之中,需要转换ES6脚本,可以像下面这样写。
229243
230- 先安装` babel-core ` 。
244+ 先安装` babel-core ` 和` babel-preset-2015 ` 。
245+
246+ ``` javascript
247+ $ npm install -- save- dev babel- core babel- preset- 2015
248+ ```
249+
250+ 然后,在项目根目录下新建一个` .babelrc ` 文件。
231251
232252``` javascript
233- $ npm install -- save- dev babel- core
253+ {
254+ " presets" : [" es2015" ]
255+ }
234256```
235257
236258然后在脚本中,调用` babel-core ` 的` transform ` 方法。
237259
238260``` javascript
239- require (" babel-core" ).transform (" code" , options);
261+ var es5Code = ' let x = n => n + 1' ;
262+ var es6Code = require (' babel-core' )
263+ .transform (es5Code, {presets: [' es2015' ]})
264+ .code ;
265+ // '"use strict";\n\nvar x = function x(n) {\n return n + 1;\n};'
240266```
241267
242- 上面代码中,` transform ` 方法的第一个参数是一个字符串,表示ES6代码 。
268+ 上面代码中,` transform ` 方法的第一个参数是一个字符串,表示需要转换的ES5代码,第二个参数是转换的配置对象 。
243269
244- Node脚本还有一种特殊的` babel ` 用法,即把` babel ` 加载为` require ` 命令的一个钩子。先将 ` babel ` 全局安装 。
270+ Node脚本还有一种特殊的` babel ` 用法,即把` babel ` 加载为` require ` 命令的一个钩子。安装 ` babel-core ` 和 ` babel-preset-es2015 ` 以后,先在项目的根目录下面,设置一个配置文件 ` .babelrc ` 。
245271
246- ``` bash
247- $ npm install -g babel
272+ ``` javascript
273+ // .babelrc
274+ {
275+ " presets" : [" es2015" ]
276+ }
248277```
249278
250279然后,在你的应用的入口脚本(entry script)头部,加入下面的语句。
251280
252281``` javascript
253- require (" babel/register" );
282+ require (" babel-core /register" );
254283```
255284
256285有了上面这行语句,后面所有通过` require ` 命令加载的后缀名为` .es6 ` 、` .es ` 、` .jsx ` 和` .js ` 的脚本,都会先通过` babel ` 转码后再加载。
257286
287+ 需要注意的是,Babel默认不会转换Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如` Object.assign ` )。如果你用到了这些功能,当前的运行环境又不支持。就需要安装` babel-polyfill ` 模块。
288+
289+ ``` bash
290+ $ npm install babel-polyfill --save
291+ ```
292+
293+ 然后,在所有脚本头部加上一行。
294+
295+ ``` javascript
296+ require (' babel-polyfill' );
297+ // 或者
298+ import ' babel-polyfill' ;
299+ ```
300+
258301### 在线转换
259302
260303Babel提供一个[ REPL在线编译器] ( https://babeljs.io/repl/ ) ,可以在线将ES6代码转为ES5代码。转换后的代码,可以直接作为ES5代码插入网页运行
0 commit comments