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

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

說幹就幹,先說下個人實現步驟(沒想到有坑!)node

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

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

src,es6開發目錄es6

dist,es5生產目錄web

test,一個測試目錄瀏覽器

 

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

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

相關文章
相關標籤/搜索