搭建es6開發與非開發環境babel-browser

前言

最近打算把es6應用到項目中，可是如何在開發環境（瀏覽器端）直接運行es6？es6已經發布一段時間了，如今大部分是在node.js環境運行，或者經過babel編譯以後運行。babel-browser主要實現用戶可以在瀏覽器上直接運行es6語法。

實現原理

經過ajax請求加載文件，在將文件內容經過babel編譯，可是babel只能編譯es6的語法，新的api並不會編譯，因此須要藉助babel-polyfill進一步編譯，可是babel-polyfill並不會編譯require和import，我封裝了一個方法來實現require加載文件，進而將整個es6文件在線編譯爲es5運行。
babel-browser是在線編譯，運行起來會很慢，因此只能在開發環境，那線上怎麼處理呢？
咱們經過babel將es6文件編譯成es5，線上直接用es5代碼，下面的demo給了一個完整的線上和線下的示例：
https://github.com/baixuexiya...

如何引入文件

一、能夠將文件下載到本地

git clone https://github.com/baixuexiyang/babel-browser.git

二、能夠使用cdn

https://unpkg.com/babel-browser-king@1.0.2/babel-browser.min.js

三、也能夠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

文件地址

https://github.com/baixuexiya...