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

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

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

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

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

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

然后下面是我的一些目錄結構，大致預覽一下。

src，es6開發(fā)目錄

dist，es5生產目錄

test，一個測試目錄

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

file file2 app

test

然后我們在html中引入dist中的經過轉譯的文件

在瀏覽器中測試，test中因為沒引入模塊，所以正常執(zhí)行，app中因為引入了模塊，而且是CommonJS規(guī)范，但是瀏覽器不支持這種規(guī)范，因此報錯

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

但是，我們發(fā)現，還是會報錯，說明語法不支持，或者兩者沖突了，因為一種是AMD，一種是CommonJS。

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

解決方法

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

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

您可能感興趣的文章:

es6
import

JavaScript函數中上下文有哪些規(guī)則
上下文是從英文context翻譯過來，指的是一種環(huán)境。在軟件工程中，上下文是一種屬性的有序序列，它們?yōu)轳v留在環(huán)境內的對象定義環(huán)境。在對象的激活過程中創(chuàng)建上下文，對象被配置為要求某些自動服務。又比如計算機技術中，相對于進程而言，上下文就是進程執(zhí)行時的環(huán)境
2021-10-10
JavaScript的代碼編寫格式規(guī)范指南
這篇文章主要介紹了JavaScript的代碼編寫格式規(guī)范指南,文中所分享的一些細節(jié)基本上也是各大js代碼格式化插件所默認約定俗成的,需要的朋友可以參考下
2015-12-12
JavaScript中關于indexOf的使用方法與問題小結
indexOf方法的作用是：根據給定參數x返回目標字符串(可以看成字符的數組)或數組中與x相等的項的索引。
2010-08-08
JavaScript中switch判斷容易犯錯的一個細節(jié)
這篇文章主要介紹了JavaScript中switch判斷容易犯錯的一個細節(jié),簡單說就是字符串和數字的差別,看完本文會有一個清晰的認知,需要的朋友可以參考下
2014-08-08
JavaScript中Cookies的相關使用教程
這篇文章主要介紹了JavaScript中Cookies的相關使用教程,包括Cookies的存儲和刪除等操作方法,需要的朋友可以參考下
2015-06-06
理解JavaScript的變量的入門教程
這篇文章主要介紹了理解JavaScript的變量的入門教程,是JS入門學習中的基礎知識,需要的朋友可以參考下
2015-07-07
JS中數據結構之棧
棧是一種遵從后進先出（LIFO）原則的有序集合。新添加的或待刪除的元素都保存在棧末尾，稱作棧頂，另一端稱作棧底。在棧里，新元素都靠近棧頂，舊元素就接近棧底。
2019-01-01
JSON的語法與規(guī)則詳解
這篇文章主要介紹了JSON的語法與規(guī)則詳解,Web?API可以接收JSON格式的數據，也可以返回JSON格式的數據。在接收JSON?數據時，需要使用相應的庫或框架來解析JSON數據，在返回JSON數據時，可以使用相應的庫或框架將數據轉換為JSON格式
2023-07-07
JavaScript中的getTimezoneOffset()方法使用詳解
這篇文章主要介紹了JavaScript中的getTimezoneOffset()方法使用詳解,是JS入門學習中的基礎知識,需要的朋友可以參考下
2015-06-06
簡介JavaScript中POSITIVE_INFINITY值的使用
這篇文章主要介紹了簡介JavaScript中POSITIVE_INFINITY值的使用,是JS入門學習中的基礎知識,需要的朋友可以參考下
2015-06-06