browser VS module VS main

前端開(kāi)發(fā)中使用到 npm 包那可算是家常便飯，而使用到 npm 包總免不了接觸到 package.json 包配置文件。

那么這里就有一個(gè)問(wèn)題，當(dāng)我們?cè)诓煌h(huán)境下 import 一個(gè) npm 包時(shí)，到底加載的是 npm 包的哪個(gè)文件？

老司機(jī)們很快地給出答案：main 字段中指定的文件。

然而我們清楚 npm 包其實(shí)又分為：

• 只允許在客戶(hù)端使用的，
• 只允許造服務(wù)端使用的，
• 瀏覽器/服務(wù)端都可以使用。

如果我們需要開(kāi)發(fā)一個(gè) npm 包同時(shí)兼容支持 web端 和 server 端，需要在不同環(huán)境下加載npm包不同的入口文件，顯然一個(gè) main 字段已經(jīng)不能夠滿(mǎn)足我們的需求，這就衍生出來(lái)了 module 與 browser 字段。

本文就來(lái)說(shuō)下 這幾個(gè)字段的使用場(chǎng)景，以及同時(shí)存在這幾個(gè)字段時(shí)，他們之間的優(yōu)先級(jí)。

文件優(yōu)先級(jí)

在說(shuō) package.json 之前，先說(shuō)下文件優(yōu)先級(jí)

由于我們使用的模塊規(guī)范有 ESM 和 commonJS 兩種，為了能在 node 環(huán)境下原生執(zhí)行 ESM 規(guī)范的腳本文件，.mjs 文件就應(yīng)運(yùn)而生。

當(dāng)存在 index.mjs 和 index.js 這種同名不同后綴的文件時(shí)，import './index' 或者 require('./index') 是會(huì)優(yōu)先加載 index.mjs 文件的。

也就是說(shuō)，優(yōu)先級(jí) mjs > js

browser，module 和 main 字段

字段定義

• main : 定義了 npm 包的入口文件，browser 環(huán)境和 node 環(huán)境均可使用
• module : 定義 npm 包的 ESM 規(guī)范的入口文件，browser 環(huán)境和 node 環(huán)境均可使用
• browser : 定義 npm 包在 browser 環(huán)境下的入口文件

使用場(chǎng)景與優(yōu)先級(jí)

首先，我們假定 npm 包 test 有以下目錄結(jié)構(gòu)

----- lib
   |-- index.browser.js
   |-- index.browser.mjs
   |-- index.js
   |-- index.mjs

其中 *.js 文件是使用 commonJS 規(guī)范的語(yǔ)法(require('xxx'))，*.mjs 是用 ESM 規(guī)范的語(yǔ)法(import 'xxx')

其 package.json 文件：

"main": "lib/index.js",  // main 
  "module": "lib/index.mjs", // module
  // browser 可定義成和 main/module 字段一一對(duì)應(yīng)的映射對(duì)象，也可以直接定義為字符串
  "browser": {
    "./lib/index.js": "./lib/index.browser.js", // browser+cjs
    "./lib/index.mjs": "./lib/index.browser.mjs"  // browser+mjs
  },
  // "browser": "./lib/index.browser.js" // browser

根據(jù)上述配置，那么其實(shí)我們的 package.json 指定的入口可以有

main

module

browser

browser+cjs

browser+mjs

這 5 種情況。

下面說(shuō)下具體使用場(chǎng)景。

webpack + web + ESM

這是我們最常見(jiàn)的使用場(chǎng)景，通過(guò) webpack 打包構(gòu)建我們的 web 應(yīng)用，模塊語(yǔ)法使用 ESM

當(dāng)我們加載

import test from 'test'

實(shí)際上的加載優(yōu)先級(jí)是 browser = browser+mjs > module > browser+cjs > main也就是說(shuō) webpack 會(huì)根據(jù)這個(gè)順序去尋找字段指定的文件，直到找到為止。

然而實(shí)際上的情況可能比這個(gè)更加復(fù)雜，具體可以參考流程圖

webpack + web + commonJS

const test = require('test')

事實(shí)上，構(gòu)建 web 應(yīng)用時(shí)，使用 ESM 或者 commonJS 模塊規(guī)范對(duì)于加載優(yōu)先級(jí)并沒(méi)有任何影響

優(yōu)先級(jí)依然是 browser = browser+mjs > module > browser+cjs > main

webpack + node + ESM/commonJS

我們清楚，使用 webpack 構(gòu)建項(xiàng)目的時(shí)候，有一個(gè) target 選項(xiàng)，默認(rèn)為 web，即進(jìn)行 web 應(yīng)用構(gòu)建。

當(dāng)我們需要進(jìn)行一些 同構(gòu)項(xiàng)目，或者其他 node 項(xiàng)目的構(gòu)建的時(shí)候，我們需要將 webpack.config.js 的 target 選項(xiàng)設(shè)置為 node 進(jìn)行構(gòu)建。

import test from 'test'
// 或者 const test = require('test')

優(yōu)先級(jí)是： module > main

node + commonJS

通過(guò) node test.js 直接執(zhí)行腳本

const test = require('test')

只有 main 字段有效。

node + ESM

通過(guò) --experimental-modules 可以讓 node 執(zhí)行 ESM 規(guī)范的腳本(必須是 mjs 文件后綴)
`node --experimental-modules test.mjs

import test from 'test'

只有 main 字段有效。

總結(jié)

• 如果 npm 包導(dǎo)出的是 ESM 規(guī)范的包，使用 module
• 如果 npm 包只在 web 端使用，并且嚴(yán)禁在 server 端使用，使用 browser。
• 如果 npm 包只在 server 端使用，使用 main
• 如果 npm 包在 web 端和 server 端都允許使用，使用 browser 和 main
• 其他更加復(fù)雜的情況，如npm 包需要提供 commonJS 與 ESM 等多個(gè)規(guī)范的多個(gè)代碼文件，請(qǐng)參考上述使用場(chǎng)景或流程圖

以上就是package.json中browser module main字段優(yōu)先級(jí)對(duì)比的詳細(xì)內(nèi)容，更多關(guān)于package.json字段優(yōu)先級(jí)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論