七、浏览器环境
最后更新于：2022-04-01 22:41:25
## 七、浏览器环境
Babel也可以用于浏览器环境。但是，从Babel 6.0开始，不再直接提供浏览器版本，而是要用构建工具构建出来。如果你没有或不想使用构建工具，可以通过安装5.x版本的`babel-core`模块获取。
~~~
$ npm install babel-core@5
~~~
运行上面的命令以后，就可以在当前目录的`node_modules/babel-core/`子目录里面，找到`babel`的浏览器版本`browser.js`（未精简）和`browser.min.js`（已精简）。
然后，将下面的代码插入网页。
~~~
~~~
上面代码中，`browser.js`是Babel提供的转换器脚本，可以在浏览器运行。用户的ES6脚本放在`script`标签之中，但是要注明`type="text/babel"`。
另一种方法是使用[babel-standalone](https://github.com/Daniel15/babel-standalone)模块提供的浏览器版本，将其插入网页。
~~~
~~~
注意，网页中实时将ES6代码转为ES5，对性能会有影响。生产环境需要加载已经转码完成的脚本。
下面是如何将代码打包成浏览器可以使用的脚本，以`Babel`配合`Browserify`为例。首先，安装`babelify`模块。
~~~
$ npm install --save-dev babelify babel-preset-es2015
~~~
然后，再用命令行转换ES6脚本。
~~~
$ browserify script.js -o bundle.js \
-t [ babelify --presets [ es2015 react ] ]
~~~
上面代码将ES6脚本`script.js`，转为`bundle.js`，浏览器直接加载后者就可以了。
在`package.json`设置下面的代码，就不用每次命令行都输入参数了。
~~~
{
"browserify": {
"transform": [["babelify", { "presets": ["es2015"] }]]
}
}
~~~
';