搭建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/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

文件地址

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