如何讓引入ES6的html檔案執行起來

2022-03-26 16:34:32 字數 1069 閱讀 6564

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

說幹就幹,先說下我的實現步驟(沒想到有坑!)

把es6**轉譯成es5;

html檔案引入轉譯後的es5;

然後在瀏覽器環境中執行;

在node環境中執行;

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

src,es6開發目錄

dist,es5生產目錄

test,乙個測試目錄

然後,看一下我的es6開發的一些js是什麼樣子。

然後我們在html中引入dist中的經過轉譯的檔案

假如,我們為了測驗,就給html加上requirejs檔案,瀏覽器支援amd/cmd規範。非同步載入定義。

但是,我們發現,還是會報錯,說明語法不支援,或者兩者衝突了,因為一種是amd,一種是commonjs。

由於我們通過node來編譯es6成es5,node模組就是參照commonjs規範來的,所以es5的語法,也屬於commonjs規範,而且現在的瀏覽器和node都不支援es6的規範或大部分不支援。

解決方法

經過查閱資料,發現可以通過webpack打包工具來將依賴合併成乙個檔案,然後引入html中。

!如何讓es6 寫的 檔案 import 起來

這段時間,學習了一點關於es6新規範的知識,然後心血來潮,想嘗試一下用es6編寫的 在瀏覽器中跑起來。說幹就幹,先說下我的實現步驟 沒想到有坑!把es6 轉譯成es5 html檔案引入轉譯後的es5 然後在瀏覽器環境中執行 在node環境中執行 然後下面是我的一些目錄結構,大致預覽一下。src,es...

如何讓 node 執行 es6 模組檔案,及其原理

最新版的node支援最新版ecmascript幾乎所有特性,但有乙個特性卻一直到現在都還沒有支援,那就是從es2015開始定義的模組化機制。而現在我們很多專案都是用es6的模組化規範來寫 的,包括node專案,所以,node不能執行es6模組檔案就會很不便。讓node執行es6模組檔案的方式有兩種 ...

ES6引入iterable型別

遍歷array可以採用下標迴圈,遍歷map和set就無法使用下標。為了統一集合型別,es6標準引入了新的iterable型別,array map和set都屬於iterable型別。具有iterable型別的集合可以通過新的for of迴圈來遍歷。for of迴圈是es6引入的新的語法,請測試你的瀏覽...