這里給大家分享我在網(wǎng)上總結(jié)出來的一些知識(shí),希望對(duì)大家有所幫助
工程化最開始就是package.json開始的,很多人學(xué)了很多年也沒搞清楚這個(gè)為什么這么神奇,其實(shí)有些字段是在特定場(chǎng)景才有效的,那每個(gè)屬性的適用場(chǎng)景和作用是什么,又牽扯很多知識(shí)點(diǎn),今天先解讀一些常見的屬性,關(guān)注我,后期在遇到特定場(chǎng)景也會(huì)再逐步的補(bǔ)充這些屬性,只有真正清楚知道每個(gè)自動(dòng)的屬性和場(chǎng)景你才能真正使用它得心應(yīng)手,也才能真正掌握并幫助你解決你的問題。
創(chuàng)建
一個(gè)package.json 你可以使用npm init
按指令創(chuàng)建,也可以通過npm init -y
來快速創(chuàng)建,當(dāng)然也可以手動(dòng)來創(chuàng)建,那現(xiàn)在我們創(chuàng)建一個(gè)。 package.json
{ "name": "package-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
這個(gè)是原裝的屬性,當(dāng)然還有一些額外的場(chǎng)景才有的,接下來我們來逐步分析:
常用屬性
這些屬性沒有沒有太復(fù)雜,但還是要仔細(xì)看看每個(gè)都可以做什么,適用于什么場(chǎng)景,如何去使用和配置
name
package.json 中最重要字段之一就是名稱name 字段,有人的說為什么我沒有配置也沒有影響我項(xiàng)目的正常運(yùn)行呢?這個(gè)是因?yàn)槟銢]有發(fā)布npm 包,這個(gè)name就是你發(fā)布到npm的包名,如果你不打算發(fā)布你的包到npm上這個(gè)是可以省略的。
當(dāng)然這個(gè)名稱也不是隨便亂起的,它也有一定的規(guī)則,否則有警告的如下:
字符串與 "^(?:(?:@(?:[a-z0-9-*~][a-z0-9-*._~]*)?/[a-z0-9-._~])|[a-z0-9-~])[a-z0-9-._~]*$" 的模式不匹配。
name的規(guī)則如下:
- 名稱必須少于或等于 214 個(gè)字符。 這包括范圍包的范圍。
- 范圍包的名稱可以以點(diǎn)或下劃線開頭。 沒有范圍是不允許的。
- 新包的名稱中不得包含大寫字母。
- 該名稱最終成為 URL、命令行參數(shù)和文件夾名稱的一部分。 因此,名稱不能包含任何非 URL 安全字符
version
這個(gè)是版本,跟name
字段差不多,基本是一起的,因?yàn)樗鼈児餐瑯?gòu)成一個(gè)假定完全唯一的標(biāo)識(shí)符,如果你不發(fā)布包也是這個(gè)省略這個(gè)字段的,當(dāng)然這個(gè)字段值也不是隨意寫的,它完全基于符合語義化版本(Semantic Versioning)來管理依賴的版本,所以版本號(hào)的更新需要符合語義化版本規(guī)范,簡(jiǎn)單總結(jié):可以被 semver
包可解析的,當(dāng)然你也可以使用這個(gè)semver
進(jìn)行版本的操作,具體可以看我的另一篇版本號(hào)文章版本號(hào)
keywords
這個(gè)也是發(fā)布到npm 上才有用的,它的作用也是別人可以通過搜索來查找你的包,或是通過npm search xxx
開查找你的包 如下,我有兩個(gè)運(yùn)行時(shí)的包處理react preact 的className的,可以看看查出了什么:
PS D:\lucky-file\package-demo> npm search 'react runtime clsx' NAME | DESCRIPTION | AUTHOR | DATE | VERSION | KEYWORDS react-auto-clsx | | =crazy-code | 2023-10-10 | 1.1.0 | react vite webpack className clsx runtime react-runtime-clsx | | =zsh-yzy | 2023-11-30 | 0.0.1 | react vite webpack className clsx runtime react-auto-classnames | JSX runtime for… | =meowtec | 2022-09-30 | 1.0.2 | react classnames clsx jsx-runtime PS D:\lucky-file\package-demo>
是不是幾個(gè)包的信息,所以這個(gè)是搜索查找用的,如果你不發(fā)布這個(gè)也可以不寫的
homepage
項(xiàng)目主頁的 url。隨便找個(gè)npm 包,可以看一下,該包的右側(cè)有個(gè)地址就是這個(gè)字段進(jìn)行配置的
bugs
這個(gè)就是要需要作者給個(gè)地址,比如你寫的包有問題,別人怎么給你提問題,聯(lián)系到你 通常我們?cè)O(shè)置的issue地址,那如何打開呢,可以通過如下方式:
npm bugs [<pkgname> [<pkgname> ...]]
license
指定一個(gè)許可證,以便人們知道他們?nèi)绾伪辉试S使用它,以及你對(duì)其施加的任何限制,常見的開源協(xié)議是 MIT 和 BSD,如果我們不確定我們應(yīng)該如何寫,可以看一下網(wǎng)上這個(gè)圖說的比較清晰借用一下:
author
它表示項(xiàng)目的作者信息,它既可以是一個(gè)字符串,又可以是一個(gè)對(duì)象
"author":{ "name": "lvz", "email": "xxxx@xx.com", "url": "https://xxxxx" }
或者使用字符串的形式也可以
"author": "lvz <xxxxx@xx.com> (https://xxxxx)"
contributors
contributors 它表示的是貢獻(xiàn)者,是一個(gè)數(shù)組,當(dāng)然這個(gè)也有兩種寫法
"contributors": [ "lvz1 <xxxxx@xx.com> (https://xxxxx)" ]
或者對(duì)象的寫法
"contributors":[ { "name": "lvz1", "email": "xxxx@xx.com", "url": "https://xxxxx" } ]
funding
如果你不開源,對(duì)資金沒有要求或有其它渠道可以不使用,這個(gè)是在npm 6.13.0添加了funding
命令,針對(duì)開源者,讓維護(hù) npm 的開發(fā)人員,為有意愿的捐贈(zèng)者指明捐贈(zèng)平臺(tái)。在 package.json 文件中添加了一個(gè)funding
字段,指向在線捐贈(zèng)服務(wù)的 url,如 Patreon、Open 或者其他支付網(wǎng)站,并可以通過npm fund
命令列出這些捐贈(zèng)平臺(tái)及其 url。
"funding": [ { "type": "patreon", "url": "http://XXXXXX" }, "http://XXXXX", { "type": "open", "url": "https://XXXXXX" } ]
files
項(xiàng)目在進(jìn)行 npm 發(fā)布時(shí),可以通過 files 指定需要跟隨一起發(fā)布的內(nèi)容來控制 npm 包的大小,避免安裝時(shí)間太長(zhǎng),比如我們包體有很多文件,但我們只想把dist放進(jìn)去,其他src,test文件并不想放在包體中,可以使用這個(gè)字段
但無論設(shè)置如何,總是會(huì)包含某些文件:
package.json
README
-
CHANGES
?/?CHANGELOG
?/?HISTORY
-
LICENSE
?/?LICENCE
NOTICE
- “main”字段中的文件 相反,某些文件總是被忽略:
.git
CVS
.svn
.hg
.lock-wscript
.wafpickle-N
.*.swp
.DS_Store
._*
npm-debug.log
.npmrc
node_modules
config.gypi
*.orig
package-lock.json
當(dāng)然除了files 也有其它方式可以來忽略文件進(jìn)入包體,我們先看一下我們什么也不處理的文件格式
- 添加.gitignore文件
src/* example/*
我們發(fā)布之后在看一下文件結(jié)構(gòu),只有index.js 也就是main字段指向的index.js還有package.json兩個(gè)文件
- 添加.npmignore 文件
src/* example
同樣我們發(fā)布之后看一下文件結(jié)構(gòu),如下圖所示:
.npmignore在程序包的根目錄下,它不會(huì)覆蓋“files”字段,但在子目錄中,它將覆蓋。該
.npmignore
文件的工作方式與一樣?.gitignore
。如果有.gitignore
文件但.npmignore
缺少文件,.gitignore
則將使用的內(nèi)容
repository
簡(jiǎn)單點(diǎn)說就是配置倉(cāng)庫(kù)地址,這個(gè)配置后,可以在npm 包首頁看到倉(cāng)庫(kù)地址入口,可以進(jìn)行點(diǎn)擊查看
"repository": { "type": "git", "url": "https://github.com/xxxxx", "directory": "xxxx/xxx" }
當(dāng)然你也可以直接寫字符串
"repository":"https://github.com/xxxxx/xxxx"
config
配置對(duì)象可用于設(shè)置在升級(jí)后持續(xù)存在的包腳本中使用的配置參數(shù)
"config": { "type": "chrome" },
我們?cè)趇ndex.js中進(jìn)行打印一下
console.log(process.env.npm_package_config_type)
此時(shí)如果你直接node index.js 你會(huì)發(fā)現(xiàn)打印的是個(gè)undefined,我們?cè)趯⑵浞旁趕cripts中:
"scripts": { "start": "node index.js" },
再執(zhí)行就可以打印出值了,這樣我們就可以在腳本中使用了這個(gè)環(huán)境變量了。
依賴配置項(xiàng)
這個(gè)是我們這次的重點(diǎn)之一,其實(shí)有些朋友經(jīng)常分不清,這些到底怎么回事,我們先整體分析一下,我們安裝一個(gè)包有兩種,一種是當(dāng)前項(xiàng)目package.json 已有的,一種是安裝包中package.json的依賴,那針對(duì)這個(gè)我們做個(gè)實(shí)驗(yàn)再總結(jié)一下看看它們都是什么妖魔鬼怪。
我們?cè)诮榻Bversion這個(gè)字段的時(shí)候,講解了如何安裝一個(gè)指定范圍的npm包,如果有疑問可以進(jìn)去查看哈,這里就不再贅述了
背景 有兩個(gè)項(xiàng)目,一個(gè)是project-demo,一個(gè)是package-demo,包名是lucky-package-demo
,project-demo會(huì)依賴lucky-package-demo
這個(gè)包。 如下project-demo 中的package.json
"dependencies": { "lucky-package-demo": "*" }
devDependencies
簡(jiǎn)單理解就是這個(gè)包是開發(fā)環(huán)境用到了,生產(chǎn)環(huán)境并不需要它,比如我們的webpack,vite,或是eslint等
我們?cè)趐ackage-demo 中安裝?vite
"devDependencies": { "vite": "4.3.0" }
然后我們?cè)趐roject-demo更新lucky-package-demo
后,可以看到project-demo的node_modules中發(fā)現(xiàn)react 和 react-demo 已經(jīng)被安裝了,雖然暫時(shí)我們并沒有去使用這兩個(gè)包,也就是說dependencies中的包將會(huì)被安裝
peerDependencies
也叫同等依賴,它主要用于確保多個(gè)模塊在同一個(gè)主模塊的上下文中使用,并共享依賴的版本,簡(jiǎn)單來說就是project-demo項(xiàng)目中已經(jīng)安裝react了,package-demo中我沒必要在dependencies依賴這個(gè)react了。從而避免項(xiàng)目中和依賴包中出現(xiàn)重復(fù)安裝包所導(dǎo)致的包版本不相容、打包了多份不同版本的庫(kù)等問題,我們舉幾個(gè)常遇到的問題來解釋一下這個(gè)屬性。
- 我有一個(gè)組件庫(kù),依賴了react,項(xiàng)目中我也要使用react并且已經(jīng)安裝好了,組件庫(kù)和項(xiàng)目可以共享react
- 但有個(gè)問題,我項(xiàng)目更新了,react的版本和組件庫(kù)react的版本不一致了,還是共享,如何避免沖突
安裝方式:
我們可以配合一些屬性使用,在依賴包中,因?yàn)槲覀儾粫?huì)在項(xiàng)目包中安裝,可以放在devDependencies中,我們又想告訴項(xiàng)目包我們需要什么范圍內(nèi)的版本,就需要設(shè)置peerDependencies,如下:
package-demo中如下配置
"devDependencies": { "react": "17.0.2", "vite": "4.3.0" }, "peerDependencies": { "react":">16.8.0 <18.0.0" }
react:"17.0.1"
,此時(shí)是滿足我們依賴包中peerDependencies中對(duì)react的版本范圍要求的,安裝很順利,項(xiàng)目和依賴包會(huì)共享17.0.1的react的包,也不會(huì)存在任何警告。dependencies: - lucky-package-demo + lucky-package-demo 0.0.10 - react + react 17.0.1 (18.2.0 is available)
dependencies: - lucky-package-demo + lucky-package-demo 0.0.10 - react + react 16.8.0 (18.2.0 is available) ?WARN? Issues with peer dependencies found . └─┬ lucky-package-demo 0.0.10 └── ? unmet peer react@">16.8.0 <18.0.0": found 16.8.0
peerDependenciesMeta
如果?peerDependencies
?中指定的包尚未安裝,npm 將發(fā)出警告,如下配置將對(duì)等依賴標(biāo)記為可選,如果用戶沒有安裝對(duì)等依賴,npm不會(huì)發(fā)出警告
"peerDependenciesMeta":{ "react":{ "optional":true } }
lucky-package-demo
,可以發(fā)現(xiàn)node_modules中并不存在react的包,控制臺(tái)也沒有任何的警告出現(xiàn)npm i -S lucky-package-demo
如果設(shè)置成optional:false
中,在project-demo中安裝lucky-package-demo
后將會(huì)自動(dòng)安裝符合范圍的react的包
bundleDependencies
npm的命令?-B, --save-bundle
語法:npm i -B [package-name]
這個(gè)屬性使用的較少,通過在?bundleDependencies
?數(shù)組中指定包名稱,在發(fā)布包時(shí),包名的數(shù)組會(huì)被打包進(jìn)去,有的說我試過但發(fā)布包什么也沒有呢?因?yàn)閱螁闻渲?code>bundleDependencies這個(gè)是沒有效果的,需要再在依賴包中安裝devDependencies或dependencies中才能將其打包到node_modules中。舉例說明:
在package-demo 中進(jìn)行如下安裝和配置,并在project-demo中npm i -S lucky-package-demo
安裝,你會(huì)發(fā)現(xiàn)project-demo中的node_modules中l(wèi)ucky-package-demo的node_modules中是bundleDependencies中配置的react-runtime-clsx包
"dependencies": { "react-runtime-clsx": "0.0.1" }, "bundleDependencies": [ "react-runtime-clsx" ]
project-demo ----node_modules -------lucky-package-demo -----------node_modules ---------------react-runtime-clsx //這個(gè)是bundleDependencies配置的 ---------------clsx 這個(gè)是react-runtime-clsx的依賴
optionalDependencies
通過npm 命令 -O, --save-optional
npm i -O [package-name]
optionalDependencies
用于定義可選依賴項(xiàng),和 dependencies
非常類似,主要的差別在于:在 optionalDependencies
中的依賴包安裝報(bào)錯(cuò)甚至找不到時(shí)不會(huì)影響到包管理器的安裝行為
npm i -O react-runtime-clsx // package-demo package.json 如下: "optionalDependencies": { "react-runtime-clsx": "0.0.1" }
optionalDependencies
?中的條目將覆蓋?dependencies
?中的同名條目,因此通常最好只放在一個(gè)位置
overrides
如果需要對(duì)依賴項(xiàng)的依賴項(xiàng)進(jìn)行特定更改,例如將依賴項(xiàng)的版本替換為已知的安全問題,將現(xiàn)有依賴項(xiàng)替換為分支,或者確保在任何地方都使用相同版本的包,則可以添加覆蓋。
package-demo中package.json 配置
"optionalDependencies": { "react-runtime-clsx": "0.0.1" }
具體的大家可以看一下文檔overrides文檔 )
項(xiàng)目中的依賴
項(xiàng)目中我們也會(huì)有依賴,有些是輔助開發(fā)的工具,有些是項(xiàng)目引用的代碼包,因?yàn)轫?xiàng)目我們是不會(huì)發(fā)布它作為npm包來使用的,它作為的是一個(gè)工程,所以在依賴上是有區(qū)分的,你是不是也有下面的困惑呢?
我隨便裝的并不影響到開發(fā)和構(gòu)建,似乎這兩者沒有區(qū)別,安裝哪里都一樣呢?
感覺是對(duì)的,其實(shí)項(xiàng)目中這兩者并沒有明顯的劃分,只是我們通常是將開發(fā)中使用的安裝到devDependencies,運(yùn)行使用的放在dependencies,其實(shí)這兩個(gè)都是安裝了的,無論你放哪都可以使用,所以也有部分剛接觸時(shí)很困惑,因?yàn)檫@個(gè)針對(duì)的是npm發(fā)布包有用的,在項(xiàng)目中還是按規(guī)范了養(yǎng)成習(xí)慣,清楚每個(gè)的含義,對(duì)我們做npm包的發(fā)布是有用的哈文章來源:http://www.zghlxwxcb.cn/news/detail-760486.html
本文轉(zhuǎn)載于:
https://juejin.cn/post/7315606159742058530
如果對(duì)您有所幫助,歡迎您點(diǎn)個(gè)關(guān)注,我會(huì)定時(shí)更新技術(shù)文檔,大家一起討論學(xué)習(xí),一起進(jìn)步。
?文章來源地址http://www.zghlxwxcb.cn/news/detail-760486.html
到了這里,關(guān)于記錄--工程化第一步這個(gè)package.json要真的搞明白才行的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!