Babel 也可以用於瀏覽器環境。但是，從 Babel 6.0 開始，不再直接提供瀏覽器版本，而是要用構建工具構建出來。如果你沒有或不想使用構建工具
1.通過安裝5.x版本的babel-core模塊獲取
$ npm install babel-core@old運行上面的命令以后，就可以在當前目錄的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"。
2.可以使用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-latest
然后，再用命令行轉換 ES6 腳本。
$ browserify script.js -o bundle.js \
-t [ babelify --presets [ latest ] ]
上面代碼將 ES6 腳本script.js，轉為bundle.js，瀏覽器直接加載后者就可以了。
在package.json設置下面的代碼，就不用每次命令行都輸入參數了。
{
"browserify": {
"transform": [["babelify", { "presets": ["latest"] }]]
}
}
3.在Github上發現的開源項目 https://github.com/baixuexiyang/babel-browser
通過ajax請求加載文件，在將文件內容通過babel編譯，但是babel只能編譯es6的語法，新的api並不會編譯，所以需要借助babel-polyfill進一步編譯，但是babel-polyfill並不會編譯require和import，我封裝了一個方法來實現require加載文件，進而將整個es6文件在線編譯為es5運行。
babel-browser是在線編譯，運行起來會很慢，所以只能在開發環境，那線上怎么處理呢？
我們通過babel將es6文件編譯成es5，線上直接用es5代碼，下面的demo給了一個完整的線上和線下的示例：
https://github.com/baixuexiyang/es6-demo
如何引入文件？
1、可以將文件下載到本地
git clone https://github.com/baixuexiyang/babel-browser.git
2、可以使用cdn
https://unpkg.com/babel-browser-king@1.0.2/babel-browser.min.js
3、也可以npm安裝
npm install babel-browser-king
如何使用？
<script src="https://unpkg.com/babel-browser-king@1.0.2/babel-browser.min.js"></script>
<script>
require.config({
path: '/jsdev' //es6文件的根目錄
});
</script>
<script type="text/babel">
let test = 1;
</script>
<script type="text/babel" src="test.js"></script>require或者import加載文件只能是相對地址
script標簽的type屬性值只能是text/babel