## 七、瀏覽器環境
Babel也可以用于瀏覽器環境。但是，從Babel 6.0開始，不再直接提供瀏覽器版本，而是要用構建工具構建出來。如果你沒有或不想使用構建工具，可以通過安裝5.x版本的`babel-core`模塊獲取。
~~~
$ npm install babel-core@5
~~~
運行上面的命令以后，就可以在當前目錄的`node_modules/babel-core/`子目錄里面，找到`babel`的瀏覽器版本`browser.js`（未精簡）和`browser.min.js`（已精簡）。
然后，將下面的代碼插入網頁。
~~~
<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
// Your ES6 code
</script>
~~~
上面代碼中，`browser.js`是Babel提供的轉換器腳本，可以在瀏覽器運行。用戶的ES6腳本放在`script`標簽之中，但是要注明`type="text/babel"`。
另一種方法是使用[babel-standalone](https://github.com/Daniel15/babel-standalone)模塊提供的瀏覽器版本，將其插入網頁。
~~~
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>
~~~
注意，網頁中實時將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"] }]]
}
}
~~~
