成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Es6 寫的文件import 起來解決方案詳解

Markxu / 2862人閱讀

摘要：解決方法經(jīng)過查閱資料，發(fā)現(xiàn)可以通過打包工具來將依賴合并成一個(gè)文件，然后引入中。感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持

這段時(shí)間，學(xué)習(xí)了一點(diǎn)關(guān)于es6新規(guī)范的知識(shí)，然后心血來潮，想嘗試一下用ES6編寫的代碼在瀏覽器中跑起來。

說干就干，先說下我的實(shí)現(xiàn)步驟（沒想到有坑?。?/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開發(fā)目錄

dist，es5生產(chǎn)目錄

test，一個(gè)測試目錄

然后，看一下我的ES6開發(fā)的一些js是什么樣子。

file1

file2

app

test

然后我們?cè)趆tml中引入dist中的經(jīng)過轉(zhuǎn)譯的文件

在瀏覽器中測試，test中因?yàn)闆]引入模塊，所以正常執(zhí)行，app中因?yàn)橐肓四K，而且是CommonJS規(guī)范，但是瀏覽器不支持這種規(guī)范，因此報(bào)錯(cuò)

假如，我們?yōu)榱藴y驗(yàn)，就給html加上requireJS文件，瀏覽器支持AMD/CMD規(guī)范。異步加載定義。

但是，我們發(fā)現(xiàn)，還是會(huì)報(bào)錯(cuò)，說明語法不支持，或者兩者沖突了，因?yàn)橐环N是AMD，一種是CommonJS。

由于我們通過node來編譯ES6成ES5，node模塊就是參照CommonJS規(guī)范來的，所以ES5的語法，也屬于CommonJS規(guī)范，而且現(xiàn)在的瀏覽器和node都不支持ES6的規(guī)范或大部分不支持。

解決方法

經(jīng)過查閱資料，發(fā)現(xiàn)可以通過webpack打包工具來將依賴合并成一個(gè)文件，然后引入html中。

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50777.html

相關(guān)文章

  • Es6 寫的文件import 起來解決方案詳解

    摘要：解決方法經(jīng)過查閱資料，發(fā)現(xiàn)可以通過打包工具來將依賴合并成一個(gè)文件，然后引入中。感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持 這段時(shí)間，學(xué)習(xí)了一點(diǎn)關(guān)于es6新規(guī)范的知識(shí)，然后心血來潮，想嘗試一下用ES6編寫的代碼在瀏覽器中跑起來。 說干就干，先說下我的實(shí)現(xiàn)步驟（沒想到有坑?。?1.把ES6代碼轉(zhuǎn)譯成ES5;2.html文件引入轉(zhuǎn)譯后的ES5;3.然后在瀏覽器環(huán)境中運(yùn)行;4.在node...

    tinylcy 評(píng)論0 收藏0

  • ES6之路之模塊詳解

    摘要：例如我們導(dǎo)入模塊，可以這么導(dǎo)入桃翁歡迎關(guān)注公眾號(hào)前端桃園報(bào)錯(cuò)不能定義相同名字變量報(bào)錯(cuò)，不能重新賦值小豬可以看到導(dǎo)入綁定這里不理解綁定，文章后面會(huì)解釋時(shí)，形式類似于對(duì)象解構(gòu)，但實(shí)際上并無關(guān)聯(lián)。 歡迎訪問個(gè)人站點(diǎn) 簡介 何為模塊 一個(gè)模塊只不過是一個(gè)寫在文件中的 JavaScript 代碼塊。 模塊中的函數(shù)或變量不可用，除非模塊文件導(dǎo)出它們。 簡單地說，這些模塊可以幫助你在你的模塊中編寫...

    huashiou 評(píng)論0 收藏0

  • 【JS基礎(chǔ)】一文看懂前端模塊化規(guī)范

    摘要：參考資料前端模塊化詳解完整版入門近一萬字的語法知識(shí)點(diǎn)補(bǔ)充徹底搞清楚中的和和詳解 前言 前端的模塊化之路經(jīng)歷了漫長的過程，想詳細(xì)了解的小伙伴可以看浪里行舟大神寫的前端模塊化詳解(完整版)，這里根據(jù)幾位大佬們寫的文章，將模塊化規(guī)范部分做了匯總和整理，希望讀完的小伙伴能有些收獲，也希望覺得有用的小伙伴可以點(diǎn)個(gè)贊，筆芯。 什么是模塊 將一個(gè)復(fù)雜的程序依據(jù)一定的規(guī)則(規(guī)范)封裝成幾個(gè)塊(文件)...

    HelKyle 評(píng)論0 收藏0

  • 前端基礎(chǔ)進(jìn)階（十五）：詳解 ES6 Modules

    摘要：下載地址安裝一個(gè)好用的命令行工具在環(huán)境下，系統(tǒng)默認(rèn)的非常難用，所以我個(gè)人比較推薦大家使用或者。下載地址安裝在命令行工具中使用查看版本的方式確保與都安裝好之后，我們就可以安裝了。前端基礎(chǔ)進(jìn)階系列目錄 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 對(duì)于新人朋友來說，想要自己去搞定一個(gè)E...

    Lowky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<