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

Markxu 發布于2019-08-01 16:50 / 2854人閱讀

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

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

說干就干，先說下我的實現步驟（沒想到有坑！）

1.把ES6代碼轉譯成ES5;
2.html文件引入轉譯后的ES5;
3.然后在瀏覽器環境中運行;
4.在node環境中運行;

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

src，es6開發目錄

dist，es5生產目錄

test，一個測試目錄

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

file1

file2

app

test

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

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

假如，我們為了測驗，就給html加上requireJS文件，瀏覽器支持AMD/CMD規范。異步加載定義。

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

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

解決方法

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

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

云服務器 GPU云服務器寫的文件import js import解決方案文件詳解配置文件詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50777.html

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

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

tinylcy 2019-08-20 16:33 評論0 收藏0
ES6之路之模塊詳解

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

huashiou 2019-08-22 17:13 評論0 收藏0
【JS基礎】一文看懂前端模塊化規范

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

HelKyle 2019-08-23 17:09 評論0 收藏0
前端基礎進階（十五）：詳解 ES6 Modules

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

Lowky 2019-08-21 18:31 評論0 收藏0