Es6 寫(xiě)的文件import 起來(lái)解決方案詳解
這段時(shí)間，學(xué)習(xí)了一點(diǎn)關(guān)于es6新規(guī)范的知識(shí)，然后心血來(lái)潮，想嘗試一下用ES6編寫(xiě)的代碼在瀏覽器中跑起來(lái)。
說(shuō)干就干，先說(shuō)下我的實(shí)現(xiàn)步驟（沒(méi)想到有坑?。?/p>
- 把ES6代碼轉(zhuǎn)譯成ES5;
- html文件引入轉(zhuǎn)譯后的ES5;
- 然后在瀏覽器環(huán)境中運(yùn)行;
- 在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是什么樣子。
file 
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)將依賴(lài)合并成一個(gè)文件，然后引入html中。
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
- JavaScript學(xué)習(xí)筆記之ES6數(shù)組方法
- JavaScript中ES6 Babel正確安裝過(guò)程
- 深入理解React中es6創(chuàng)建組件this的方法
- 詳解JavaScript ES6中的模板字符串
- JavaScript ES6中CLASS的使用詳解
- 解析JavaScript的ES6版本中的解構(gòu)賦值
- JavaScript ES6的新特性使用新方法定義Class
- 深入淺析react native es6語(yǔ)法
- ES6所改良的javascript“缺陷”問(wèn)題
- ES6中如何使用Set和WeakSet
- 詳解Javascript ES6中的箭頭函數(shù)(Arrow Functions)
- 簡(jiǎn)單談?wù)凟S6的六個(gè)小特性
- ES6生成器用法實(shí)例分析
相關(guān)文章
javascript學(xué)習(xí)筆記(十五) js間歇調(diào)用和超時(shí)調(diào)用
javascript學(xué)習(xí)筆記之js間歇調(diào)用和超時(shí)調(diào)用介紹，學(xué)習(xí)js的朋友可以參考下2012-06-06
JavaScript arguments 多參傳值函數(shù)
在一個(gè)函數(shù)體內(nèi)，標(biāo)識(shí)符arguments引用了arguments對(duì)象的一個(gè)特殊屬性?？梢园凑諗?shù)目（而不是名字）獲取傳遞給函數(shù)的參數(shù)值。2010-10-10
JavaScript運(yùn)行時(shí)庫(kù)屬性一覽表
這篇文章主要介紹了JavaScript運(yùn)行時(shí)庫(kù)屬性,需要的朋友可以參考下2014-03-03
為了程序/代碼的易讀性，基本上每一種編程語(yǔ)言都有注釋的功能，javascript也不例外，javascript注釋代碼有多種形式，本文章向大家介紹javascript注釋代碼的兩種方法，需要的朋友可以參考一下2017-01-01
跨域請(qǐng)求的完美解決方法(JSONP, CORS)
下面小編就為大家?guī)?lái)一篇跨域請(qǐng)求的完美解決方法(JSONP, CORS)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
JavaScript中用sort()方法對(duì)數(shù)組元素進(jìn)行排序的操作
這篇文章主要介紹了JavaScript中用sort()方法對(duì)數(shù)組元素進(jìn)行排序的操作,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JavaScript面向?qū)ο罄^承，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
解析DHTML,JavaScript,DOM,BOM以及WEB標(biāo)準(zhǔn)的描述
本篇文章是對(duì)DHTML,JavaScript,DOM,BOM以及WEB標(biāo)準(zhǔn)進(jìn)行了詳細(xì)的描述介紹，需要的朋友參考下2013-06-06
使用let語(yǔ)句，允許你在JavaScript中創(chuàng)建塊范圍局部變量。let語(yǔ)句是在JavaScript的ECMAScript 6標(biāo)準(zhǔn)中引入的。下面我們來(lái)簡(jiǎn)單學(xué)習(xí)一下吧2019-05-05
關(guān)于可運(yùn)行代碼無(wú)法正常執(zhí)行的使用說(shuō)明
腳本之家網(wǎng)站為了方便大家快速的查看效果，只要大家運(yùn)行一下代碼即可能看到效果。2010-05-05