12 個(gè)提高JavaScript編碼效率的 NPM 技巧

NPM，Node Package Manager，是 JavaScript 編程語言的軟件包管理器。任何使用 Javascript ?的開發(fā)人員都使用過這個(gè)出色的 CLI 工具來為他們的項(xiàng)目安裝依賴項(xiàng)。

在這篇文章中，我將分享 NPM 的技巧和訣竅，它們可以提高你的工作效率，讓你更明智、更高效地使用NPM。

1. 初始化包

我們可以運(yùn)行 npm init命令來初始化包，但是它會詢問關(guān)于包、作者等信息。還有另一種方法可以使用 npm init -y 命令自動(dòng)生成我們的 package.json 。

npm?init?-y

我們還可以使用 npm config 命令設(shè)置一些默認(rèn)的初始化配置，例如作者詳細(xì)信息等。

npm?config?set?init-author-name?"Ankit?Jain"
npm?config?set?init-author-email?"[email protected]"

然后運(yùn)行 npm init -y 自動(dòng)生成我們的包:

{
??"name":?"",
??"version":?"1.0.0",
??"description":?"",
??"main":?"index.js",
??"scripts":?{
????"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1"
??},
??"keywords":?[],
??"author":?"Ankit?Jain?",
??"license":?"ISC"
}

我們還可以使用 npm config 配置自己的 javascript 文件來擴(kuò)展 npm init 的功能：

npm?config?set?init-module?

2. 從不同源安裝包

NPM CLI 還允許從其他來源（例如 Bit ，tarball 文件，GitHub ，Bitbucket 和 gist ）安裝 javascript 包。

#?Install?a?component?from?Bit?(set?Bit?as?a?scoped?registry)
npm?config?set?@bit:registry?https://node.bit.dev
npm?i?@bit/username.collection.component
#?Install?from?tarball?stored?locally
npm?i?./local-tarball-package.tgz
#?Install?tarball?package?from?internet
npm?i?https://abc/xyz/package.tar.gz
#?Install?from?github?repo
npm?i?githubuser/reponame
#?Install?from?bitbucket?repo
npm?i?bitbucket:bitbucketuser/reponame
#?Install?from?gist
npm?i?gist:gistID

例如：從Bit安裝按鈕組件

假設(shè)我需要一個(gè)按鈕組件，而我的一個(gè)隊(duì)友已經(jīng)按鈕組件發(fā)布到我們在 Bit 上的組件集合上了。

首先，將 Bit 配置為scope （范圍包）

npm?config?set?@bit:registry?https://node.bit.dev

然后，我將轉(zhuǎn)到我團(tuán)隊(duì)的組件集中尋找按鈕：

找到 button 組件，復(fù)制安裝命令，使用NPM進(jìn)行安裝

npm?i?@bit/the_a-team.imperfect-components.button

我的團(tuán)隊(duì)的名稱：“ The A-Team”。我們的組件集名稱：“Imperfect Components”。

例如：從npm企業(yè)私庫安裝 Icon 組件

例如，我需要在項(xiàng)目中安裝一個(gè) Icon 組件，而我的一個(gè)隊(duì)友已經(jīng)將按鈕組件發(fā)布到 npm 企業(yè)私庫上了。

我們同樣可以使用 scope 和企業(yè)私庫關(guān)聯(lián)起來。這樣你就可以同時(shí)使用 npm 公共倉庫和一些其他的私有倉庫中的模塊:

npm?config?set?@xscope:registry?https://xxx.com/npm/

多源安裝：用戶無感知

每次用戶使用私有庫的時(shí)候都需要切換 npm 鏡像路徑，利用 npm preinstall 的鉤子，項(xiàng)目的 package.json 里增加 preinstall 要執(zhí)行的腳本，這樣合作方可以無感知的安裝:

//?在執(zhí)行?npm?install?命令前，npm?會自動(dòng)執(zhí)行?npm?preinstall?鉤子
"scripts":?{
????"preinstall":?"node?./bin/preinstall.js"
}

配置 ./bin/preinstall.js：

const?{?exec?}?=?require('child_process');

exec('npm?config?get?registry',?function(error,?stdout,?stderr)?{
??if?(!stdout.toString().match(/registry\.x\.com/))?{
????exec('??npm?config?set?@xscope:registry?https://xxx.com/npm/');
??}
});

3.全新安裝依賴包

我們可以運(yùn)行 npm ci 來全新安裝我們的軟件依賴包。它通常用于CI / CD平臺等自動(dòng)化環(huán)境。

npm?ci

它與 npm install 在以下方面不同：

• 它會根據(jù) package-lock.json 安裝依賴包，這可以保證整個(gè)開發(fā)團(tuán)隊(duì)都使用版本完全一致的依賴，避免把時(shí)間浪費(fèi)在排查因?yàn)橐蕾嚥灰恢露鴮?dǎo)致的各種奇怪問題上
• 它會安裝 package-lock.json 文件中提到的軟件包的確切版本，無需計(jì)算求解依賴滿足問題，在大多數(shù)情況下都可以大大加速 node 模塊安裝過程
• 它會先刪除項(xiàng)目中現(xiàn)有的 node_modules ，然后全新安裝
• 它不會寫入 package.json 或任何包鎖：安裝基本上是凍結(jié)的
• npm install 可以安裝單個(gè)依賴包，npm ci 只能一次安裝整個(gè)項(xiàng)目所以依賴包，無法安裝單個(gè)依賴包

另外，如果 package-lock.json 過時(shí)（和 package.json 沖突），那么 npm ci 會很貼心地報(bào)錯(cuò)，避免項(xiàng)目依賴陷入過時(shí)狀態(tài)。

注意： 如果你使用 npm ci，別忘了把 package-lock.json 加入 git 倉庫。

4.使用快捷方式安裝包

這是最有用的功能，可用于節(jié)省安裝軟件包時(shí)的時(shí)間：

#?Install?package
npm?install?
Shortcut:?npm?i?
#?Install?devDependencies
npm?install?--save-dev?
Shortcut:?npm?i?-D?
#?Install?dependencies?(This?is?default)
npm?install?--save-prod?
Shortcut:?npm?i?-P?
#?Install?packages?globally
npm?install?--global?
Shortcut:?npm?i?-g?

在一個(gè)命令中安裝多個(gè)包：

npm?i?express?cheerio?axios

安裝具有相同前綴的多個(gè)包：

npm?i?eslint-{plugin-import,plugin-react,loader}?express

5. NPM scripts

NPM scripts 是最有用的功能。除了預(yù)定義的前后鉤子（通常稱為生命周期腳本）外，它還支持自定義腳本，例如：

• preinstall ：它會在安裝任何依賴包之前運(yùn)行

我們還可以在項(xiàng)目中運(yùn)行 npm run env ，列出項(xiàng)目中存在的所有npm環(huán)境變量。包括以 npm_package_ 為前綴的包屬性。

npm?run?env

輸出：

npm_config_save_dev=
npm_config_legacy_bundling=
npm_config_dry_run=
npm_config_viewer=man
.
.
npm_package_license=ISC????????????????#?Package?properties
npm_package_author_name=Ankit?Jain
npm_package_name=npm-tips-and-tricks???#?Name?of?our?package
.
.

我們還可以通過 process.env.npm_package_name 和類似的其他變量在代碼中訪問上述 env 變量。

在package.json中配置自己的變量

我們可以定義 package.json 文件中的 config ，來定義自己的變量作為帶有 npm_package_config_ 前綴的npm環(huán)境變量，如下：

"config":?{
????"myvariable":?"Hello?World"
},

現(xiàn)在，讓我們在env變量中進(jìn)行檢查：

npm?run?env?|?grep?npm_package_config_

輸出：

npm_package_config_myvariable=Hello?World

定義我們的自定義腳本

npm run 命令會顯示我們在 package.json 文件中定義的所有腳本。

讓我們在 package.json 中添加一些自定義腳本：

"scripts":?{
????"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1",
????"start":?"node?index.js",
????"echo-hello":?"echo?\"Hello\"",
????"echo-helloworld":?"echo?\"Helloworld\"",
????"echo-both":?"npm?run?echo-hello?&&?npm?run?echo-helloworld",
????"echo-both-in-parallel":?"npm?run?echo-hello?&?npm?run?echo-helloworld",
????"echo-packagename":?"echo?$npm_package_name",
????"echo-myvariable":?"echo?$npm_package_config_myvariable",
????"echo-passargument":?"npm?run?echo-packagename?--?\"hello\"",
????"echo-pipedata":?"cat?./package.json?|?jq?.name?>?package-name.txt"
},

運(yùn)行以下命令：

npm?run

輸出：

#?npm-tips-and-tricks?(name?of?our?package)
Lifecycle?scripts?included?in?npm-tips-and-tricks:
??test
????echo?"Error:?no?test?specified"?&&?exit?1
??start
????node?index.js
available?via?`npm?run-script`:
??echo-hello
????echo?"Hello"
??echo-helloworld
????echo?"Helloworld"
??echo-both
????npm?run?echo-hello?&&?npm?run?echo-helloworld
??echo-both-in-parallel
????npm?run?echo-hello?&?npm?run?echo-helloworld
??echo-packagename
????echo?$npm_package_name
??echo-myvariable
????echo?$npm_package_config_myvariable
??echo-passargument
????npm?run?echo-packagename?--?"hello"
??echo-pipedata
????cat?./package.json?|?jq?.name?>?package-name.txt

運(yùn)行一個(gè)簡單的npm腳本：

npm?run?echo-hello
#?Output
>?echo?"Hello"
Hello

在單個(gè)npm腳本中運(yùn)行多個(gè)腳本：

我們可以使用 && 運(yùn)行多個(gè)腳本。這兩個(gè)腳本都是連續(xù)運(yùn)行的，即一個(gè)接一個(gè)地運(yùn)行。

npm?run?echo-both
#?Output
>?npm?run?echo-hello?&&?npm?run?echo-helloworld
>[email protected]?echo-hello?
>?echo?"Hello"
Hello
>[email protected]?echo-helloworld
>?echo?"Helloworld"
Helloworld

我們還可以使用 ＆ 并行運(yùn)行多個(gè)腳本。

npm?run?echo-both-in-parallel
#?Output
>?npm?run?echo-hello?&?npm?run?echo-helloworld
>[email protected]?echo-hello
>?echo?"Hello"
>[email protected]?echo-helloworld
>?echo?"Helloworld"
Hello
Helloworld

在npm腳本中使用npm環(huán)境變量

npm?run?echo-packagename
#?Output
>?echo?$npm_package_name
npm-tips-and-tricks
-------------
npm?run?echo-myvariable
#?Output
>?echo?$npm_package_config_myvariable
Hello?World

將參數(shù)傳遞給另一個(gè)npm腳本

我們可以使用 -- 將參數(shù)傳遞給 npm 腳本。在下面的示例中，我們將 hello 作為參數(shù)傳遞給 echo-packagename 腳本。

npm?run?echo-passargument
#?Output
>?npm?run?echo-packagename?--?"hello"
>[email protected]?echo-packagename
>?echo?$npm_package_name?"hello"
npm-tips-and-tricks?hello

使用管道將數(shù)據(jù)從一個(gè)npm腳本傳遞到另一個(gè)腳本

npm?run?echo-pipedata
#?Output
>?cat?./package.json?|?jq?.name?>?package-name.txt
#?Let's?cat?package-name.txt
cat?package-name.txt
#?Output
"npm-tips-and-tricks"

6.快速導(dǎo)航到打包文檔

我們只需運(yùn)行以下命令即可快速導(dǎo)航到任何npm軟件包的文檔：

npm?docs?
OR
npm?home?

如果我們要檢查任何未解決的問題或?qū)⑷魏五e(cuò)誤歸檔到npm軟件包，我們也可以通過運(yùn)行以下命令導(dǎo)航到網(wǎng)站：

npm?bug?

類似，npm repo 在瀏覽器中打開GitHub repo頁面。

7. 刪除重復(fù)的包

我們可以通過運(yùn)行 npm dedupe 命令刪除重復(fù)的依賴項(xiàng)。它通過刪除重復(fù)的程序包并在多個(gè)從屬程序包之間有效地共享公共依賴項(xiàng)，簡化了總體結(jié)構(gòu)。這樣就形成了一個(gè)平面且具有重復(fù)數(shù)據(jù)刪除功能的樹。

npm?dedupe?or?npm?ddp

8.掃描應(yīng)用程序中的漏洞

我們可以運(yùn)行 npm audit 命令來掃描我們的項(xiàng)目中任何依賴項(xiàng)中的任何漏洞。它會以表格格式生成漂亮的輸出并顯示（我們也可以用JSON獲取輸出），如果其它包是多級/多依賴項(xiàng)，則其它包都依賴于此包。

npm audit fix 會自動(dòng)安裝所有漏洞包的補(bǔ)丁版本(如果可用)

npm?audit?fix

9.檢查環(huán)境

我們可以使用 npm doctor 命令在我們的環(huán)境中運(yùn)行多個(gè)檢查，比如，我們的npm CLI是否有足夠的權(quán)限來安裝javascript包，它是否能夠連接到npm注冊表。它還檢查node和npm版本，驗(yàn)證緩存是否有損壞的軟件包。

npm?doctor

10.在本地測試你的軟件包

NPM提供了 npm link 命令，以便我們可以迭代地工作和測試包。NPM link會在全局npm modules文件夾中創(chuàng)建一個(gè)指向我們測試包的符號鏈接，我們可以通過運(yùn)行 npm link 將這個(gè)包安裝到我們的測試應(yīng)用程序中，這將創(chuàng)建一個(gè)從全局安裝的包到我們項(xiàng)目 node_modules 目錄的符號鏈接。它在測試本地包或使用本地npm包時(shí)非常有用。

cd?/test-package?(package?name?is?helloworld)
npm?link?????????????????????#?Global?symlink?created
cd?/application
npm?link?helloworld?????????#?Create?symlink?in?node_modules?

11.檢查包是否過時(shí)

我們可以使用 npm outdated 命令來檢查所有過時(shí)的npm軟件包。它還顯示了應(yīng)為過時(shí)的軟件包安裝的最新版本。

npm?outdated?--long?or?npm?outdated?-l

我們還可以通過簡單地運(yùn)行以下命令來檢查任何npm軟件包的最新版本：

#?Shows?the?package?information
npm?view??or?npm?v?
#?Shows?the?latest?version?only
npm?v??version
#?Shows?the?list?of?all?versions
npm?v??versions

12.列出所有已安裝的軟件包

通過運(yùn)行 npm list 命令，我們可以列出項(xiàng)目中安裝的所有npm包。它將創(chuàng)建一個(gè)樹結(jié)構(gòu)，顯示已安裝的包及其依賴項(xiàng)。

npm?list?or?npm?ls?

我們可以使用 —depth 標(biāo)志來限制搜索深度：

npm?ls?--depth=1

總結(jié)

在本文中，我們了解了一些有用的NPM技巧和竅門，可用于提高開發(fā)效率。歡迎提出更多NPM小技巧。

本文翻譯自：https://blog.bitsrc.io/npm-tips-and-tricks-24c5e9defea6，與原文略有改動(dòng)

最后

歡迎關(guān)注「前端瓶子君」，回復(fù)「交流」加入前端交流群！
歡迎關(guān)注「前端瓶子君」，回復(fù)「算法」自動(dòng)加入，從0到1構(gòu)建完整的數(shù)據(jù)結(jié)構(gòu)與算法體系！在這里，瓶子君不僅介紹算法，還將算法與前端各個(gè)領(lǐng)域進(jìn)行結(jié)合，包括瀏覽器、HTTP、V8、React、Vue源碼等。在這里（算法群），你可以每天學(xué)習(xí)一道大廠算法編程題（阿里、騰訊、百度、字節(jié)等等）或 leetcode，瓶子君都會在第二天解答喲！另外，每周還有手寫源碼題，瓶子君也會解答喲！》》面試官也在看的算法資料《《“在看和轉(zhuǎn)發(fā)”就是最大的支持