這篇文章主要為大家展示了“如何使用NPM”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用NPM”這篇文章吧。

創(chuàng)新互聯(lián)自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元涼州做網(wǎng)站,已為上家服務(wù),為涼州各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

1. 初始化包

我們可以運(yùn)行 npm init命令來初始化包，但是它會詢問關(guān)于包、作者等信息。還有另一種方法可以使用 npm init -y 命令自動生成我們的  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 "ankitjain28may77@gmail.com"

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

{   "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è)我需要一個按鈕組件，而我的一個隊(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)目中安裝一個 Icon 組件，而我的一個隊(duì)友已經(jīng)將按鈕組件發(fā)布到 npm 企業(yè)私庫上了。

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

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

多源安裝：用戶無感知

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

// 在執(zhí)行 npm install 命令前，npm 會自動執(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平臺等自動化環(huán)境。

npm ci

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

• 它會根據(jù) package-lock.json  安裝依賴包，這可以保證整個開發(fā)團(tuán)隊(duì)都使用版本完全一致的依賴，避免把時間浪費(fèi)在排查因?yàn)橐蕾嚥灰恢露鴮?dǎo)致的各種奇怪問題上

• 它會安裝 package-lock.json 文件中提到的軟件包的確切版本，無需計算求解依賴滿足問題，在大多數(shù)情況下都可以大大加速 node  模塊安裝過程

• 它會先刪除項(xiàng)目中現(xiàn)有的 node_modules ，然后全新安裝

• 它不會寫入 package.json 或任何包鎖：安裝基本上是凍結(jié)的

• npm install 可以安裝單個依賴包，npm ci 只能一次安裝整個項(xiàng)目所以依賴包，無法安裝單個依賴包

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

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

4.使用快捷方式安裝包

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

# 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 

在一個命令中安裝多個包：

npm i express cheerio axios

安裝具有相同前綴的多個包：

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

復(fù)制代碼

輸出：

# 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)行一個簡單的npm腳本：

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

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

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

npm run echo-both # Output > npm run echo-hello && npm run echo-helloworld > npm-tips-and-tricks@1.0.0 echo-hello  > echo "Hello" Hello > npm-tips-and-tricks@1.0.0 echo-helloworld > echo "Helloworld" Helloworld

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

npm run echo-both-in-parallel # Output > npm run echo-hello & npm run echo-helloworld > npm-tips-and-tricks@1.0.0 echo-hello > echo "Hello" > npm-tips-and-tricks@1.0.0 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ù)傳遞給另一個npm腳本

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

npm run echo-passargument # Output > npm run echo-packagename -- "hello" > npm-tips-and-tricks@1.0.0 echo-packagename > echo $npm_package_name "hello" npm-tips-and-tricks hello

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

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誤歸檔到npm軟件包，我們也可以通過運(yùn)行以下命令導(dǎo)航到網(wǎng)站：

npm bug 

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

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

我們可以通過運(yùn)行 npm dedupe 命令刪除重復(fù)的依賴項(xiàng)。 它通過刪除重復(fù)的程序包并在多個從屬程序包之間有效地共享公共依賴項(xiàng)，簡化了總體結(jié)構(gòu)。  這樣就形成了一個平面且具有重復(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 會自動安裝所有漏洞包的補(bǔ)丁版本(如果可用)

npm audit fix

9.檢查環(huán)境

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

npm doctor

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

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

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

11.檢查包是否過時

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

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)建一個樹結(jié)構(gòu)，顯示已安裝的包及其依賴項(xiàng)。

npm list or npm ls

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

npm ls --depth=1

以上是“如何使用NPM”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！