Es6 寫的文件import 起來解決方案詳解
這段時間,學習了一點關于es6新規(guī)范的知識,然后心血來潮,想嘗試一下用ES6編寫的代碼在瀏覽器中跑起來。
說干就干,先說下我的實現(xiàn)步驟(沒想到有坑?。?/p>
- 把ES6代碼轉(zhuǎn)譯成ES5;
- html文件引入轉(zhuǎn)譯后的ES5;
- 然后在瀏覽器環(huán)境中運行;
- 在node環(huán)境中運行;
然后下面是我的一些目錄結(jié)構(gòu),大致預覽一下。
src,es6開發(fā)目錄
dist,es5生產(chǎn)目錄
test,一個測試目錄
然后,看一下我的ES6開發(fā)的一些js是什么樣子。
file 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中。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- JavaScript學習筆記之ES6數(shù)組方法
- JavaScript中ES6 Babel正確安裝過程
- 深入理解React中es6創(chuàng)建組件this的方法
- 詳解JavaScript ES6中的模板字符串
- JavaScript ES6中CLASS的使用詳解
- 解析JavaScript的ES6版本中的解構(gòu)賦值
- JavaScript ES6的新特性使用新方法定義Class
- 深入淺析react native es6語法
- ES6所改良的javascript“缺陷”問題
- ES6中如何使用Set和WeakSet
- 詳解Javascript ES6中的箭頭函數(shù)(Arrow Functions)
- 簡單談談ES6的六個小特性
- ES6生成器用法實例分析
相關文章
JavaScript函數(shù)中上下文有哪些規(guī)則
上下文是從英文context翻譯過來,指的是一種環(huán)境。在軟件工程中,上下文是一種屬性的有序序列,它們?yōu)轳v留在環(huán)境內(nèi)的對象定義環(huán)境。在對象的激活過程中創(chuàng)建上下文,對象被配置為要求某些自動服務。又比如計算機技術中,相對于進程而言,上下文就是進程執(zhí)行時的環(huán)境2021-10-10JavaScript中關于indexOf的使用方法與問題小結(jié)
indexOf方法的作用是:根據(jù)給定參數(shù)x返回目標字符串(可以看成字符的數(shù)組)或數(shù)組中與x相等的項的索引。2010-08-08JavaScript中switch判斷容易犯錯的一個細節(jié)
這篇文章主要介紹了JavaScript中switch判斷容易犯錯的一個細節(jié),簡單說就是字符串和數(shù)字的差別,看完本文會有一個清晰的認知,需要的朋友可以參考下2014-08-08JavaScript中的getTimezoneOffset()方法使用詳解
這篇文章主要介紹了JavaScript中的getTimezoneOffset()方法使用詳解,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06簡介JavaScript中POSITIVE_INFINITY值的使用
這篇文章主要介紹了簡介JavaScript中POSITIVE_INFINITY值的使用,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06