package.json是怎樣的

今天就跟大家聊聊有關(guān)package.json是怎樣的，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

常用配置項(xiàng)

files

files定義了哪些文件應(yīng)該被包括在 npm install 后的 node_modules中。

當(dāng)然，有些文件是自動(dòng)暴露出來的，不管你是不是配置了files，比如：

• package.json

• README / CHANGELOG / LICENSE

• ...

很多庫都定義了 files，避免一些不必要的文件暴露到 node_modules 中。

vite 中是這樣配置的：

{   "files": [ "bin", "dist", "client.d.ts" ] }

我之前就不知道這個(gè)配置，導(dǎo)致我發(fā)布的一個(gè) npm 組件 vue-awesome-progress[3]  就暴露了源碼部分，雖然這也沒啥影響，本來就是開源的。但是這也增加了別人的資源下載量，也是一種浪費(fèi)。所以，專業(yè)點(diǎn)的搞法還是加上files配置吧。

bin

bin 列出了可執(zhí)行文件，表示你這個(gè)包要對(duì)外提供哪些腳本。

在這個(gè)包被 install 安裝時(shí)，如果是全局安裝 -g，bin 列出的可執(zhí)行文件會(huì)被添加到 PATH 變量(全局可執(zhí)行);如果是局部安裝，則會(huì)進(jìn)入到  node_modules/.bin/ 目錄下。

bin 在一些 CLI 工具中用得很頻繁，比如 Vue CLI。

在開發(fā) npm 包時(shí)，要求發(fā)布的可執(zhí)行腳本要以#!/usr/bin/env node開頭，這是為什么呢?

我查了一下，原來是為了用于指明該腳本文件要使用 node 來執(zhí)行。

main, browser, module

這三個(gè)配置對(duì)我們的影響還是挺大的。

main字段決定了別人require('xxx')時(shí)，引用的是哪個(gè)模塊對(duì)象。在不設(shè)置main字段時(shí)，默認(rèn)值是index.js。

如果你開發(fā)的包是用于瀏覽器端的，那么用browser指定入口文件是最佳的選擇。

module則代表你開發(fā)的包支持ESM，并指定了一個(gè)ESM入口。

具體這三個(gè)字段怎么用，還是挺有學(xué)問的，這里推薦一篇文章package.json中你還不清楚的browser，module，main  字段優(yōu)先級(jí)[4]，講得挺細(xì)。

長圖警告!

scripts

scripts也基本上每天都用了，但是它的鉤子腳本你用過嗎?如果沒有用過，可以試試，在組織腳本流程時(shí)非常好用!

• pre：在一個(gè)script執(zhí)行前執(zhí)行，比如prebuild，可以在打包前做一些準(zhǔn)備工作。

• post：在一個(gè)script執(zhí)行后執(zhí)行，比如postbuild，可以在打包后做一些收尾工作。

config

通過config配置的參數(shù)xxx，可以在腳本中通過npm_package_config_xxx 的形式引用，比如port。

{   "config": {     "port": "8080"   } }

依賴相關(guān)

dependencies

dependencies可以理解為生產(chǎn)依賴，通過npm install --save安裝的依賴包都會(huì)進(jìn)入到dependencies中。

devDependencies

devDependencies可以理解為開發(fā)環(huán)境依賴，通常是一些工具類的包，比如 webpack, babel等。通過npm install  --save-dev安裝的依賴包都會(huì)進(jìn)入到devDependencies中。

但是，在結(jié)合一些構(gòu)建工具使用時(shí)，我們往往會(huì)有困惑。比如我安裝了一個(gè)包到devDependencies中，但是不小心在項(xiàng)目中引用了它，最后也被  webpack 打包到構(gòu)建結(jié)果中了。這是怎么回事呢?

建議結(jié)合上篇文章npm install這一節(jié)[5]一起看。

peerDependencies

我是package-a，你裝我，你就必須裝我的peerDependencies。

讓“調(diào)包俠”將package-a的依賴提升到自己的node_modules中，這樣可以在“調(diào)包俠”和package-a都需要同一個(gè)依賴(比如vue)時(shí)，避免重復(fù)安裝。這常見于開發(fā)組件或者庫。

注意，一個(gè) npm 包的開發(fā)者如果聲明了peerDependencies,開發(fā)環(huán)境下在該包目錄npm  install也不會(huì)在node_modules中安裝這些依賴，所以往往還需要借助devDependencies。

舉個(gè)例子，我開發(fā)一個(gè)組件，不想發(fā)布到 npm 時(shí)包含了 vue 的代碼，這就需要外部提供 vue ，所以我把 vue 定義在  peerDependencies 也無可厚非。但是，在開發(fā)組件時(shí)，一般還需要本地開發(fā)環(huán)境跑一個(gè) demo 試試效果，這時(shí)候是依賴 vue 的，所以還需要在  devDependencies 中安裝 vue 。我看了下 vue-router 就是這么做的，所以我在開發(fā)自己的組件時(shí)也學(xué)會(huì)了這招。

bundledDependencies

bundledDependencies跟上面的依賴都不太一樣，配置上不是鍵值對(duì)的形式，而是一個(gè)數(shù)組。

{   "bundledDependencies": [     "vue",     "vue-router"   ] }

在運(yùn)行npm pack時(shí)，會(huì)將對(duì)應(yīng)依賴打包到tgz文件中。用得不多，不知道具體的細(xì)節(jié)，主要還是直接用npm install安裝 tgz  包的場景比較少，有個(gè)概念就行。

optionalDependencies

optionalDependencies用于配置可選的依賴，即使配了這個(gè)，代碼里也要做好判斷(保護(hù))，否則運(yùn)行報(bào)錯(cuò)就不好玩了。

try {   var foo = require('foo')   var fooVersion = require('foo/package.json').version } catch (er) {   foo = null }

題外話

仔細(xì)讀過package.json文檔后，整體上還是解決了我的不少困惑，對(duì)我開發(fā) npm  組件也提供了不少幫助。

看完上述內(nèi)容，你們對(duì)package.json是怎樣的有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。