Es6 寫的文件import 起來解決方案詳解

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

說幹就幹，先說下個人實現步驟（沒想到有坑！）

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

而後下面是個人一些目錄結構，大體預覽一下。

src，es6開發目錄

dist，es5生產目錄

test，一個測試目錄

而後，看一下個人ES6開發的一些js是什麼樣子。

file1

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中。

感謝閱讀，但願能幫助到你們，謝謝你們對本站的支持！