如何讓引入ES6的html文件運行起來

這段時間，學習了一點關於es6新規范的知識，然后心血來潮，想嘗試一下用ES6編寫的代碼在瀏覽器中跑起來。

說干就干，先說下我的實現步驟（沒想到有坑！）

1. 把ES6代碼轉譯成ES5;
2. html文件引入轉譯后的ES5;
3. 然后在瀏覽器環境中運行;
4. 在node環境中運行;

然后下面是我的一些目錄結構，大致預覽一下。

src，es6開發目錄

dist，es5生產目錄

test，一個測試目錄

 

然后，看一下我的ES6開發的一些js是什么樣子。

file        file2      app  

 

test  

 

然后我們在html中引入dist中的經過轉譯的文件

在瀏覽器中測試，test中因為沒引入模塊，所以正常執行，app中因為引入了模塊，而且是CommonJS規范，但是瀏覽器不支持這種規范，因此報錯

假如，我們為了測驗，就給html加上requireJS文件，瀏覽器支持AMD/CMD規范。異步加載定義。

但是，我們發現，還是會報錯，說明語法不支持，或者兩者沖突了，因為一種是AMD，一種是CommonJS。

 

由於我們通過node來編譯ES6成ES5，node模塊就是參照CommonJS規范來的，所以ES5的語法，也屬於CommonJS規范，而且現在的瀏覽器和node都不支持ES6的規范或大部分不支持。

 

解決方法

   經過查閱資料，發現可以通過webpack打包工具來將依賴合並成一個文件，然后引入html中。