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

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

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

起因

最近寫完一個基于sao的模板再把之前寫的一些代碼弄到github上，在項(xiàng)目中使用時遇到需要兼容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"
}

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

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

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

如果你也有把項(xiàng)目發(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://specialneedsforspecialkids.com/yun/103807.html

相關(guān)文章

Vue.js學(xué)習(xí)系列二 —— vuex學(xué)習(xí)實(shí)踐筆記（附DEMO）

摘要：有興趣的同學(xué)可以查看之前發(fā)布的文章學(xué)習(xí)系列一學(xué)習(xí)實(shí)踐筆記附學(xué)習(xí)系列二學(xué)習(xí)實(shí)踐筆記附學(xué)習(xí)系列三和網(wǎng)絡(luò)傳輸相關(guān)知識的學(xué)習(xí)實(shí)踐學(xué)習(xí)系列四打包工具的使用學(xué)習(xí)系列五從來聊聊學(xué)習(xí)系列項(xiàng)目地址項(xiàng)目暫時有點(diǎn)亂，之后會進(jìn)行整理優(yōu)化。上次學(xué)習(xí)了vue-router的使用，讓我能夠在各個頁面間切換，將頁面搭建了起來。這次則要學(xué)習(xí)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)的。以上所描述的模塊載入機(jī)制均定義在模塊之中。 Node.js簡介首先從名字說起，網(wǎng)上查閱資料的時候會發(fā)現(xiàn)關(guān)于node的寫法五花八門，到底哪一種寫法最標(biāo)準(zhǔn)呢？遵循官方網(wǎng)站的說法，一直將項(xiàng)目稱之為Node或者Node.js。...

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

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

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

摘要：從再到目前當(dāng)紅明星，前端模塊打包技術(shù)日新月異，在今年月份和月份左右接連更新了和版本為了減少冗余模塊，縮減文件大小，中也加入了關(guān)于的特征，可以查看知乎如何評價新引入的代碼優(yōu)化技術(shù)的討論。從Grunt->gulp->webpack,再到目前當(dāng)紅明星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ù)才會運(yùn)行。也采用語句加載模塊，但是不同于，它要求兩個參數(shù)第一個參數(shù)，是一個數(shù)組，里面的成員就是要加載的模塊第二個參數(shù)，則是加載成功之后的回調(diào)函數(shù)。本篇文章來自對文章《js模塊化編程之徹底弄懂CommonJS和AMD/CMD！》的總結(jié)，大部分摘自文章原話，本人只是為了學(xué)習(xí)方便做的筆記，之后有新的體會會及時補(bǔ)充...

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