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

更新時間：2016年12月13日 09:17:03 投稿：lqh

這篇文章主要介紹了如何讓es6 寫的文件import 起來詳解的相關(guān)資料,需要的朋友可以參考下

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

說干就干，先說下我的實現(xiàn)步驟（沒想到有坑?。?/p>

把ES6代碼轉(zhuǎn)譯成ES5;
html文件引入轉(zhuǎn)譯后的ES5;
然后在瀏覽器環(huán)境中運行;
在node環(huán)境中運行;

然后下面是我的一些目錄結(jié)構(gòu)，大致預(yù)覽一下。

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中。

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

您可能感興趣的文章:

es6
import

相關(guān)文章

javascript學(xué)習(xí)筆記(十五) js間歇調(diào)用和超時調(diào)用
javascript學(xué)習(xí)筆記之js間歇調(diào)用和超時調(diào)用介紹，學(xué)習(xí)js的朋友可以參考下
2012-06-06
JavaScript arguments 多參傳值函數(shù)
在一個函數(shù)體內(nèi)，標(biāo)識符arguments引用了arguments對象的一個特殊屬性?？梢园凑諗?shù)目（而不是名字）獲取傳遞給函數(shù)的參數(shù)值。
2010-10-10
JavaScript運行時庫屬性一覽表
這篇文章主要介紹了JavaScript運行時庫屬性,需要的朋友可以參考下
2014-03-03
javascript 注釋代碼的幾種方法總結(jié)
為了程序/代碼的易讀性，基本上每一種編程語言都有注釋的功能，javascript也不例外，javascript注釋代碼有多種形式，本文章向大家介紹javascript注釋代碼的兩種方法，需要的朋友可以參考一下
2017-01-01
跨域請求的完美解決方法(JSONP, CORS)
下面小編就為大家?guī)硪黄缬蛘埱蟮耐昝澜鉀Q方法(JSONP, CORS)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
JavaScript中用sort()方法對數(shù)組元素進(jìn)行排序的操作
這篇文章主要介紹了JavaScript中用sort()方法對數(shù)組元素進(jìn)行排序的操作,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
2015-06-06
淺談JavaScript面向?qū)ο?-繼承
這篇文章主要介紹了JavaScript面向?qū)ο罄^承，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
解析DHTML,JavaScript,DOM,BOM以及WEB標(biāo)準(zhǔn)的描述
本篇文章是對DHTML,JavaScript,DOM,BOM以及WEB標(biāo)準(zhǔn)進(jìn)行了詳細(xì)的描述介紹，需要的朋友參考下
2013-06-06
了解JavaScript中l(wèi)et語句
使用let語句，允許你在JavaScript中創(chuàng)建塊范圍局部變量。let語句是在JavaScript的ECMAScript 6標(biāo)準(zhǔn)中引入的。下面我們來簡單學(xué)習(xí)一下吧
2019-05-05
關(guān)于可運行代碼無法正常執(zhí)行的使用說明
腳本之家網(wǎng)站為了方便大家快速的查看效果，只要大家運行一下代碼即可能看到效果。
2010-05-05