NPM中有哪些有用的提示和技巧

如果你在日常工作流程中使用到NPM ，我相信這篇文章所介紹的提示和技巧會對你有幫助的

【推薦課程：node.js課程】

【推薦文章：npm是什么、npm如何安裝與配置】

生成 package.json

我們通常執(zhí)行 npm init，然后開始添加 npm 請求的信息。 但是，如果我們不關(guān)心所有這些信息，并且希望保留默認值，那么對于 npm 請求的每一條數(shù)據(jù)，我們都按 enter 鍵。為了避免這種情況，你可以輸入 npm init -y。這樣就可以跳過問題詢問了。

注：你也可以使用 npm init --yes 作用是一樣的。

安裝模塊

你可以使用更加簡單的 npm i 來代替 npm install。

一次安裝多個模塊

你不需要為每個模塊鍵入一個 npm install 命令，例如：

npm i gulp-pugnpm i gulp-debugnpm i gulp-sass

你可以只運行一個命令，一次性安裝所有這些模塊：

npm i gulp-pug gulp-debug gulp-sass

還有更加簡單的方法，如果所有名稱都以相同的前綴開頭，你不需要鍵入整個名稱：

npm i gulp{-debug,-sass,-pug}

使用 install flags(安裝參數(shù)) 的快捷方式

如果要安裝軟件包并將其另存為生產(chǎn)依賴項，則通常會這樣做

npm i gulp --save-prod

你可以使用 -P 快捷方式，像這樣：

npm i gulp -P

對于開發(fā)依賴項也是一樣，不需要鍵入完整的 --save-dev 標志，你可以使用 -D 快捷方式，像這樣：

npm i gulp -D

默認情況下，當你運行不帶任何 flags(參數(shù)) 的 npm install 時，npm 會將包作為依賴項添加到 package.json 文件中。 如果要防止這種情況，請使用 --no-save flags(參數(shù)) 安裝，如下所示：

npm i gulp --no-save

獲取包信息

下面的命令將顯示 vue 包的相關(guān)信息：

npm view vue 或 npm v vue

如果你只想獲得最新版本的軟件包，可以試試下面這個命令：

> npm v vue version> 2.5.17

如果你想獲得 npm 包完整的版本列表，請嘗試復數(shù)形式

> npm v vue versions> [ '0.0.0', '0.6.0', '0.7.0', ... '2.5.15', '2.5.16', '2.5.17-beta.0', '2.5.17' ]

安裝特定版本的軟件包

如果要安裝版本，而不是最新版本的軟件包，可以鍵入：

npm i vue@2.5.15

鑒于記憶名稱比數(shù)字更容易（至少對我來說），你可以使用 dist-tag 列表中名稱，運行 npm v 命令即可得到該列表 ，如下所示：

npm i vue@beta

搜索 package(包)

有時你可能記不住你前一段時間或你朋友推薦的某個 package(包) 的確切名稱。 在這種情況下，你可以使用 npm 搜索，直接在終端中執(zhí)行搜索：

npm search gulp debug

或者

npm s gulp debug

這將打印包含描述，作者和一些其他信息的包列表：

卸載 package(包)

如果你不想打開 package.json 文件并從那里手動刪除依賴項，則可以使用以下命令將其刪除：

npm uninstall vue

這將從 node_modules 文件夾和 package.json 文件中刪除該包。 當然，你可以使用 rm ， un 或 r 來實現(xiàn)相同的效果，例如：

npm rm vue

如果由于某種原因你只想從 node_modules 文件夾中刪除包文件，但仍然將其作為依賴項保存在 package.json 文件中，則可以使用 --no-save 參數(shù)：

npm rm vue --no-save

列出依賴項

如果要查看項目依賴項列表，可以使用

npm ls

這將列出 package.json 文件中所有的依賴項以及它們的所有依賴項。 如果你只想列出你的依賴項，你可以這樣做

npm ls --depth=0

這將打印出這樣的東西：

├── jquery@3.3.1├── vue@2.5.17└── yarn@1.12.3

當然，如果要查看所有全局安裝的包的列表，可以使用 -g 標志

npm ls -g -depth 0

運行測試

你可以使用 npm run tests 運行測試，但你可以用 npm test 甚至更簡短的 npm t 代替。

顯示可用的 script

有時，我們希望查看 package.json 文件中包含的腳本。 我們當然可以打開 package.json 文件，但我們也可以這樣做：

npm run

如果在 package.json 文件中有這樣的配置，如下所示：

"scripts": { "test": "jest", "build": "gulp build"}

那么 npm run 命令將顯示以下內(nèi)容：

Lifecycle scripts included in npm: test jestavailable via `npm run-script`: build gulp-build

從 Github 倉庫安裝 package(包)

你可以直接從 Github 倉庫安裝一個包：

npm i https://github.com/sindresorhus/gulp-debug

或者你可以省略域名部分

npm i sindresorhus/gulp-debug

打開包的 Github 頁面

你當然可以通過 Google 搜索，然后查找該頁面，或者你可以執(zhí)行以下操作：

npm repo create-react-app

無需安裝軟件包即可執(zhí)行上述命令。

列出所有可用的 NPM 環(huán)境變量

你可以通過運行以下命令來查看可供我們使用的 NPM 變量的完整列表：

npm run env | grep npm_

上面的命令將打印如下內(nèi)容：

npm_config_fetch_retry_maxtimeout=60000npm_config_tag_version_prefix=vnpm_config_strict_ssl=truenpm_config_sso_type=oauth...

這些變量的好處是它們可以在你的腳本中使用，你甚至可以創(chuàng)建自己的 NPM 環(huán)境變量，讓我們看看如何創(chuàng)建。

添加自己的 NPM 變量

你可以通過向 package.json 文件添加自己的 NPM 變量。 它可以是任何 key，但我更喜歡將所有 NPM 變量放在 config key 中，以保持結(jié)構(gòu)有序。 像這樣：

"config": { "build_folder":"./dist" }

現(xiàn)在，如果你使用前面討論的命令 npm run env | grep npm_ 列出你的變量，你會看到你的新變量在那里：

npm_package_config_build_folder=./distnpm_config_fetch_retry_maxtimeout=60000npm_config_tag_version_prefix=vnpm_config_strict_ssl=truenpm_config_sso_type=oauth...

默認情況下，npm 會將你的變量命名以 npm_package 為前綴，并保持其在 package.json文件中的結(jié)構(gòu)，即 config_build_folder 。

在 NPM script 中使用 NPM 變量

一旦你看到了完整的變量列表，并且你希望在 script 中使用這些變量中的任何一個的值，那么你就可以在 package.json 中執(zhí)行此操作(請參閱上一節(jié)中變量 npm_package_config_build_folder 的值)

"scripts": { "build": "gulp build --dist $npm_package_config_build_folder"}

一旦你用 npm run build 運行這個命令，它將被執(zhí)行為

bash 代碼:

gulp build --dist ./dist

總結(jié)：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com