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