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

如何引入文件？

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

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

 

如何使用？

 1 <script src="https://unpkg.com/babel-browser-king@1.0.2/babel-browser.min.js"></script>   
 2 <script>   
 3     require.config({   
 4         path: '/jsdev'  //es6文件的根目錄   
 5     });   
 6 </script>   
 7 <script type="text/babel">   
 8     let test = 1;   
 9 </script>   
10 <script type="text/babel" src="test.js"></script>

注意事項

require或者import加載文件只能是相對地址 
script標籤的type屬性值只能是text/babel

文件地址

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