摘要:解決方法經(jīng)過查閱資料,發(fā)現(xiàn)可以通過打包工具來將依賴合并成一個文件,然后引入中。感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持
這段時間,學習了一點關(guān)于es6新規(guī)范的知識,然后心血來潮,想嘗試一下用ES6編寫的代碼在瀏覽器中跑起來。
說干就干,先說下我的實現(xiàn)步驟(沒想到有坑!)
1.把ES6代碼轉(zhuǎn)譯成ES5;
2.html文件引入轉(zhuǎn)譯后的ES5;
3.然后在瀏覽器環(huán)境中運行;
4.在node環(huán)境中運行;
然后下面是我的一些目錄結(jié)構(gòu),大致預(yù)覽一下。
src,es6開發(fā)目錄
dist,es5生產(chǎn)目錄
test,一個測試目錄
然后,看一下我的ES6開發(fā)的一些js是什么樣子。
file1
file2
app
test
然后我們在html中引入dist中的經(jīng)過轉(zhuǎn)譯的文件
在瀏覽器中測試,test中因為沒引入模塊,所以正常執(zhí)行,app中因為引入了模塊,而且是CommonJS規(guī)范,但是瀏覽器不支持這種規(guī)范,因此報錯
假如,我們?yōu)榱藴y驗,就給html加上requireJS文件,瀏覽器支持AMD/CMD規(guī)范。異步加載定義。
但是,我們發(fā)現(xiàn),還是會報錯,說明語法不支持,或者兩者沖突了,因為一種是AMD,一種是CommonJS。
由于我們通過node來編譯ES6成ES5,node模塊就是參照CommonJS規(guī)范來的,所以ES5的語法,也屬于CommonJS規(guī)范,而且現(xiàn)在的瀏覽器和node都不支持ES6的規(guī)范或大部分不支持。
解決方法
經(jīng)過查閱資料,發(fā)現(xiàn)可以通過webpack打包工具來將依賴合并成一個文件,然后引入html中。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/50777.html
摘要:解決方法經(jīng)過查閱資料,發(fā)現(xiàn)可以通過打包工具來將依賴合并成一個文件,然后引入中。感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持 這段時間,學習了一點關(guān)于es6新規(guī)范的知識,然后心血來潮,想嘗試一下用ES6編寫的代碼在瀏覽器中跑起來。 說干就干,先說下我的實現(xiàn)步驟(沒想到有坑!) 1.把ES6代碼轉(zhuǎn)譯成ES5;2.html文件引入轉(zhuǎn)譯后的ES5;3.然后在瀏覽器環(huán)境中運行;4.在node...
摘要:例如我們導(dǎo)入模塊,可以這么導(dǎo)入桃翁歡迎關(guān)注公眾號前端桃園報錯不能定義相同名字變量報錯,不能重新賦值小豬可以看到導(dǎo)入綁定這里不理解綁定,文章后面會解釋時,形式類似于對象解構(gòu),但實際上并無關(guān)聯(lián)。 歡迎訪問個人站點 簡介 何為模塊 一個模塊只不過是一個寫在文件中的 JavaScript 代碼塊。 模塊中的函數(shù)或變量不可用,除非模塊文件導(dǎo)出它們。 簡單地說,這些模塊可以幫助你在你的模塊中編寫...
摘要:參考資料前端模塊化詳解完整版入門近一萬字的語法知識點補充徹底搞清楚中的和和詳解 前言 前端的模塊化之路經(jīng)歷了漫長的過程,想詳細了解的小伙伴可以看浪里行舟大神寫的前端模塊化詳解(完整版),這里根據(jù)幾位大佬們寫的文章,將模塊化規(guī)范部分做了匯總和整理,希望讀完的小伙伴能有些收獲,也希望覺得有用的小伙伴可以點個贊,筆芯。 什么是模塊 將一個復(fù)雜的程序依據(jù)一定的規(guī)則(規(guī)范)封裝成幾個塊(文件)...
摘要:下載地址安裝一個好用的命令行工具在環(huán)境下,系統(tǒng)默認的非常難用,所以我個人比較推薦大家使用或者。下載地址安裝在命令行工具中使用查看版本的方式確保與都安裝好之后,我們就可以安裝了。前端基礎(chǔ)進階系列目錄 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 對于新人朋友來說,想要自己去搞定一個E...
閱讀 1827·2021-09-22 15:54
閱讀 2938·2021-09-01 10:42
閱讀 3451·2019-08-30 15:56
閱讀 1445·2019-08-29 18:46
閱讀 2476·2019-08-29 10:57
閱讀 2719·2019-08-28 17:57
閱讀 3670·2019-08-23 18:14
閱讀 842·2019-08-23 17:03