package.json 中你還不清楚的 browser，module，main 字段優先級

caozhijian 發布于2019-08-23 18:03 / 2480人閱讀

摘要：本文就來說下這幾個字段的使用場景，以及同時存在這幾個字段時，他們之間的優先級。當存在和這種同名不同后綴的文件時，或者是會優先加載文件的。或者優先級是通過直接執行腳本只有字段有效。

browser VS module VS main

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

那么這里就有一個問題，當我們在不同環境下 import 一個 npm 包時，到底加載的是 npm 包的哪個文件？

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

然而我們清楚 npm 包其實又分為：

只允許在客戶端使用的，

只允許造服務端使用的，

瀏覽器/服務端都可以使用。

如果我們需要開發一個 npm 包同時兼容支持 web端和 server 端，需要在不同環境下加載npm包不同的入口文件，顯然一個 main 字段已經不能夠滿足我們的需求，這就衍生出來了 module 與 browser 字段。

本文就來說下這幾個字段的使用場景，以及同時存在這幾個字段時，他們之間的優先級。

文件優先級

在說 package.json 之前，先說下文件優先級

由于我們使用的模塊規范有 ESM 和 commonJS 兩種，為了能在 node 環境下原生執行 ESM 規范的腳本文件，.mjs 文件就應運而生。

當存在 index.mjs 和 index.js 這種同名不同后綴的文件時，import "./index" 或者 require("./index") 是會優先加載 index.mjs 文件的。

也就是說，優先級 mjs > js

browser，module 和 main 字段 字段定義

main : 定義了 npm 包的入口文件，browser 環境和 node 環境均可使用

module : 定義 npm 包的 ESM 規范的入口文件，browser 環境和 node 環境均可使用

browser : 定義 npm 包在 browser 環境下的入口文件

使用場景與優先級

首先，我們假定 npm 包 test 有以下目錄結構

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

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

其 package.json 文件：

  "main": "lib/index.js",  // main 
  "module": "lib/index.mjs", // module

  // browser 可定義成和 main/module 字段一一對應的映射對象，也可以直接定義為字符串
  "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

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

main

module

browser

browser+cjs

browser+mjs

這 5 種情況。

下面說下具體使用場景。

webpack + web + ESM

這是我們最常見的使用場景，通過 webpack 打包構建我們的 web 應用，模塊語法使用 ESM

當我們加載

import test from "test"

實際上的加載優先級是 browser = browser+mjs > module > browser+cjs > main
也就是說 webpack 會根據這個順序去尋找字段指定的文件，直到找到為止。

然而實際上的情況可能比這個更加復雜，具體可以參考流程圖

webpack + web + commonJS

const test = require("test")

事實上，構建 web 應用時，使用 ESM 或者 commonJS 模塊規范對于加載優先級并沒有任何影響

優先級依然是 browser = browser+mjs > module > browser+cjs > main

webpack + node + ESM/commonJS

我們清楚，使用 webpack 構建項目的時候，有一個 target 選項，默認為 web，即進行 web 應用構建。

當我們需要進行一些同構項目，或者其他 node 項目的構建的時候，我們需要將 webpack.config.js 的 target 選項設置為 node 進行構建。

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

優先級是： module > main

node + commonJS

通過 node test.js 直接執行腳本

const test = require("test")

只有 main 字段有效。

node + ESM

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

import test from "test"

只有 main 字段有效。

總結

如果 npm 包導出的是 ESM 規范的包，使用 module

如果 npm 包只在 web 端使用，并且嚴禁在 server 端使用，使用 browser。

如果 npm 包只在 server 端使用，使用 main

如果 npm 包在 web 端和 server 端都允許使用，使用 browser 和 main

其他更加復雜的情況，如npm 包需要提供 commonJS 與 ESM 等多個規范的多個代碼文件，請參考上述使用場景或流程圖

本文首發于 github 博客
如文章對你有幫助，你的 star 是對我最大的支持
其他文章：

掌握甩鍋技術: Typescript 運行時數據校驗

還可以這么玩？超實用 Typescript 內置類型與自定義類型

插播廣告：   
深圳 Shopee 長期內推   
崗位：前端，后端(要轉go)，產品，UI，測試，安卓，IOS，運維 全都要。    
薪酬福利：20K-50K

GPU云服務器云服務器 package.json ecs安全組中規則的優先級執行匹配順序說明 newasp中main類 java中清楚緩沖區

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

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

從零開始搭建一個React項目

摘要：優化代碼拆分從入口文件開始，遞歸地構建了整個應用的模塊依賴圖表，然后通常會將所有的模塊打包成一個。如果你還不知道什么是React，請點擊這里github源碼安裝Node.js 如果你還不知道什么是ECMAScript，請點擊這里如果你還不知道什么是Node.js，請點擊這里下載Node.js并安裝；接著打開windows命令行窗口分別輸入node -v及npm -v如下圖所示，...

HollisChuang 2019-08-23 12:19 評論0 收藏0
package.json 非官方字段集合

摘要：非官方字段集合官方字段請參考。下面介紹的是非官方字段，也就是各種工具定義的相關字段。詳細參考相關字段設置項目的瀏覽器兼容情況。相關字段測試庫。相關字段代碼檢查與優化。 package.json 非官方字段集合 package.json 官方字段請參考 https://docs.npmjs.com/files/package.json。下面介紹的是非官方字段，也就是各種工具定義的相關字段...

denson 2019-08-23 11:56 評論0 收藏0
作為前端開發者，你還不知道什么是 postCss？

摘要：的定位屬于預處理器嗎還是屬于后置處理器都不是，因為具體做的事取決于開發者使用了什么插件。這里做一個我覺得比較恰當的類比，中的相當于的中的，，等預處理器相當于，雖然不是完全合理，但是還是比較恰當。前言原諒我取這樣的標題，我知道 postCss 對于大多數前端開發者來說早已經很熟悉了，但是樓主作為一個初出茅廬的前端er，還有好多的工具和技術沒接觸過，說來慚愧。雖然平時也喜歡使用css預...

appetizerio 2019-08-29 17:17 評論0 收藏0
嘗試造了個工具類庫，名為 Diana

摘要：的另一種形式測試踩坑之路代碼覆蓋率單元測試的代碼覆蓋率統計，是衡量測試用例好壞的一個的方法。 showImg(https://segmentfault.com/img/remote/1460000012564211?w=640&h=280); 項目地址: diana文檔地址: http://muyunyun.cn/diana/ 造輪子的意義為啥已經有如此多的前端工具類庫還要自己造輪...

zhichangterry 2019-08-21 18:22 評論0 收藏0
webpack優化

摘要：使用要給項目構建接入動態鏈接庫的思想，需要完成以下事情把網頁依賴的基礎模塊抽離出來，打包到一個個單獨的動態鏈接庫中去。接入已經內置了對動態鏈接庫的支持，需要通過個內置的插件接入，它們分別是插件用于打包出一個個單獨的動態鏈接庫文件。 webpack優化查看所有文檔頁面：全棧開發，獲取更多信息。原文鏈接：webpack優化，原文廣告模態框遮擋，閱讀體驗不好，所以整理成本文，方便查找。 ...

ChanceWong 2019-08-22 17:34 評論0 收藏0