關(guān)于js module系統(tǒng)的一些筆記

oogh 發(fā)布于2019-08-23 17:06 / 1406人閱讀

摘要：起因最近寫完一個基于的模板再把之前寫的一些代碼弄到上，在項目中使用時遇到需要兼容的情況才發(fā)現(xiàn)在加載文件時存在一定策略，下面來簡單說一下。不知道為何用生成的在引入后無法命中關(guān)鍵字，導致引入空內(nèi)容。

起因

最近寫完一個基于sao的模板再把之前寫的一些代碼弄到github上，在項目中使用時遇到需要兼容IE的情況才發(fā)現(xiàn)webpack在加載文件時存在一定策略，下面來簡單說一下。

例子

先看一下這個例子的文件和pkg的設(shè)置

dist/
    vpin.esm.js #ES2015格式
    vpin.min.js #UMD格式
    vpin.js     #Commonjs格式

package.js文件設(shè)置如下

{
    "main": "vpin.js",
    "jsnext:main": "vpin.esm.js",
    "module": "vpin.esm.js",
    "browser": "vpin.min.js"
}

在項目中用webpack加載時這個例子時，會優(yōu)先加載browser設(shè)置的文件，然后才是module或者jsnext:main，最后才是main。

不知道為何用rollup生成的UMD在webpack引入后無法命中exports關(guān)鍵字，導致引入空內(nèi)容。

由于上面問題導致我困惑很久，后來根據(jù)webpack加載策略，把browser設(shè)置去掉后加載esm方式的文件就把問題解決了。

如果你也有把項目發(fā)布至npm，那么請留意一下package.json相關(guān)設(shè)置，能避免不必要的麻煩。

參考資料

JavaScript Module Systems Showdown: CommonJS vs AMD vs ES2015 分析三種JS Module的設(shè)計因由

Webpack 4 不完全遷移指北提及webpack模塊類型相關(guān)內(nèi)容

webpack 4 compatibility issue

GPU云服務(wù)器云服務(wù)器關(guān)于系統(tǒng)錯誤的問題關(guān)于js的介紹關(guān)于linux操作系統(tǒng)的書籍關(guān)于js讀取json里的數(shù)據(jù)

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

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

相關(guān)文章

Vue.js學習系列二 —— vuex學習實踐筆記（附DEMO）

摘要：有興趣的同學可以查看之前發(fā)布的文章學習系列一學習實踐筆記附學習系列二學習實踐筆記附學習系列三和網(wǎng)絡(luò)傳輸相關(guān)知識的學習實踐學習系列四打包工具的使用學習系列五從來聊聊學習系列項目地址項目暫時有點亂，之后會進行整理優(yōu)化。上次學習了vue-router的使用，讓我能夠在各個頁面間切換，將頁面搭建了起來。這次則要學習vue的狀態(tài)管理模式——vuex。它類似于redux來應(yīng)用的全局狀態(tài)。注：本...

DobbyKim 2019-08-21 15:52 評論0 收藏0
Node.js隨手筆記（一）：node簡介與模塊系統(tǒng)

摘要：模塊系統(tǒng)為了讓的文件可以相互調(diào)用，提供了一個簡單的模塊系統(tǒng)。但是，沒有模塊系統(tǒng)。包管理簡稱，是隨同一起安裝的包管理工具。輸入命令，根據(jù)提示配置包的相關(guān)信息，生成相應(yīng)的。以上所描述的模塊載入機制均定義在模塊之中。 Node.js簡介首先從名字說起，網(wǎng)上查閱資料的時候會發(fā)現(xiàn)關(guān)于node的寫法五花八門，到底哪一種寫法最標準呢？遵循官方網(wǎng)站的說法，一直將項目稱之為Node或者Node.js。...

TNFE 2019-08-23 11:25 評論0 收藏0
PostCSS自學筆記（一）【安裝使用篇】

摘要：而則可制定個人需求的一套解決方案僅安裝需要的插件。迫不及待的你已經(jīng)等不及安裝使用了吧。安裝及使用一般是結(jié)合自動化工具使用，如果要單獨使用可以安裝，這里我先對的安裝使用講解下。接下來說點實際的，如何利用結(jié)合自動化工作在項目中使用。 PostCSS介紹 PostCSS是一個利用JS插件來對CSS進行轉(zhuǎn)換的工具，這些插件非常強大，強大到無所不能。其中，Autoprefixer就是眾多Post...

jsummer 2019-08-29 13:17 評論0 收藏0
webpack v2升級踩坑筆記

摘要：從再到目前當紅明星，前端模塊打包技術(shù)日新月異，在今年月份和月份左右接連更新了和版本為了減少冗余模塊，縮減文件大小，中也加入了關(guān)于的特征，可以查看知乎如何評價新引入的代碼優(yōu)化技術(shù)的討論。從Grunt->gulp->webpack,再到目前當紅明星rollup，前端模塊打包技術(shù)日新月異，webpack在今年1月份和6月份左右接連更新了v2和v3版本,為了減少冗余模塊，縮減bundle文件...

JayChen 2019-08-20 17:59 評論0 收藏0
關(guān)于JavaScript模塊規(guī)范之CommonJSAMDCMD

摘要：所有依賴這個模塊的語句，都定義在一個回調(diào)函數(shù)中，等到加載完成之后，這個回調(diào)函數(shù)才會運行。也采用語句加載模塊，但是不同于，它要求兩個參數(shù)第一個參數(shù)，是一個數(shù)組，里面的成員就是要加載的模塊第二個參數(shù)，則是加載成功之后的回調(diào)函數(shù)。本篇文章來自對文章《js模塊化編程之徹底弄懂CommonJS和AMD/CMD！》的總結(jié)，大部分摘自文章原話，本人只是為了學習方便做的筆記，之后有新的體會會及時補充...

binaryTree 2019-08-26 13:22 評論0 收藏0