首頁  >  文章  >  web前端  >  NPM中有哪些有用的提示和技巧

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

清浅
清浅原創
2019-01-21 15:54:384205瀏覽

NPM中可以只執行一個命令來安裝多個模組、獲取套件的資訊、安裝特定版本的軟體包、列出依賴項等等有用的提示和技巧

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

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

#【推薦課程:node.js課程

【推薦文章:#npm是什麼npm如何安裝與設定

產生package.json

我們通常會執行npm init,然後開始加入npm 請求的資訊。但是,如果我們不關心所有這些信息,並且希望保留預設值,那麼對於 npm 請求的每一條數據,我們都按 enter 鍵。為了避免這種情況,你可以輸入 npm init -y。這樣就可以跳過問題詢問了。

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

安裝模組

你可以用更簡單的 npm i 來取代 npm install。

一次安裝多個模組

你不需要為每個模組鍵入一個npm install 指令,例如:

bash 程式碼:
npm i gulp-pugnpm i gulp-debugnpm i gulp-sass

你可以只執行一個指令,一次安裝所有這些模組:

bash 程式碼:
npm i gulp-pug gulp-debug gulp-sass

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

bash 程式碼:
npm i gulp{-debug,-sass,-pug}

#使用install flags(安裝參數) 的捷徑

##如果要安裝軟體套件並將其另存為生產依賴項,則通常會這樣做

bash 程式碼:
npm i gulp --save-prod
你可以使用-P 快捷方式,像這樣:

bash 程式碼:
npm i gulp -P
對於開發依賴項也是一樣,不需要鍵入完整的--save-dev 標誌,你可以使用-D 快捷方式,像這樣:

bash 程式碼:
npm i gulp -D
預設情況下,當你執行不帶任何flags(參數) 的npm install 時,npm 會將套件作為依賴項新增到package.json 檔案中。如果要防止這種情況,請使用--no-save flags(參數) 安裝,如下所示:

bash 程式碼:
npm i gulp --no-save

取得套件資訊

下面的指令將顯示vue 套件的相關資訊:

npm view vue 或npm v vue

npm 获取包信息

如果你只想取得最新版本的軟體包,可以試試下面這個命令:

bash 代碼:
> npm v vue version> 2.5.17
如果你想獲得npm 包完整的版本列表,請嘗試複數形式

bash代碼:
> 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' ]

安裝特定版本的軟體包##如果要安裝版本,而不是最新版本的軟體包,可以鍵入:

bash代碼:

npm i vue@2.5.15
鑑於記憶名稱比數字更容易(至少對我來說),你可以使用dist-tag 列表中名稱,運行npm v 命令即可得到該列表,如下所示:

bash 程式碼:

npm i vue@beta
搜尋package(套件)

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

bash 代碼:

npm search gulp debug

bash 代碼:

npm s gulp debug
這將列印包含描述,作者和一些其他資訊的套件清單:

npm 搜索结果

#卸載package(套件)

##如果你不想打開package.json 檔案並從那裡手動刪除依賴項,則可以使用以下命令將其刪除:

bash 程式碼:

npm uninstall vue
這將從node_modules 資料夾和package.json文件中刪除該包。當然,你可以使用rm , un 或r 來實現相同的效果,例如:
bash 代碼:

npm rm vue
如果由於某種原因你只想從node_modules 資料夾中刪除包文件,但仍然將其作為依賴項保存在package.json 檔案中,則可以使用--no-save 參數:
bash 程式碼:

npm rm vue --no-save
列出依賴項

如果要查看專案依賴項列表,可以使用

bash 程式碼:

npm ls
這將列出package.json 檔案中所有的依賴項以及它們的所有相依性。如果你只想列出你的依賴項,你可以這樣做
bash 程式碼:

npm ls --depth=0

这将打印出这样的东西:

bash 代码:
├── jquery@3.3.1├── vue@2.5.17└── yarn@1.12.3

当然,如果要查看所有全局安装的包的列表,可以使用 -g 标志

bash 代码:
npm ls -g -depth 0

运行测试

你可以使用 npm run tests 运行测试,但你可以用 npm test 甚至更简短的 npm t 代替。

显示可用的 script

有时,我们希望查看 package.json 文件中包含的脚本。 我们当然可以打开 package.json 文件,但我们也可以这样做:

bash 代码:
npm run

如果在 package.json 文件中有这样的配置,如下所示:

bash 代码:
"scripts": {  "test": "jest",  "build": "gulp build"}

那么 npm run 命令将显示以下内容:

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

从 Github 仓库安装 package(包)

你可以直接从 Github 仓库安装一个包:

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

或者你可以省略域名部分

bash 代码:
npm i sindresorhus/gulp-debug

打开包的 Github 页面

你当然可以通过 Google 搜索,然后查找该页面,或者你可以执行以下操作:

bash 代码:
npm repo create-react-app

无需安装软件包即可执行上述命令。

列出所有可用的 NPM 环境变量

你可以通过运行以下命令来查看可供我们使用的 NPM 变量的完整列表:

bash 代码:
npm run env | grep npm_

上面的命令将打印如下内容:

bash 代码:
npm_config_fetch_retry_maxtimeout=60000npm_config_tag_version_prefix=vnpm_config_strict_ssl=truenpm_config_sso_type=oauth...

这些变量的好处是它们可以在你的脚本中使用,你甚至可以创建自己的 NPM 环境变量,让我们看看如何创建。

添加自己的 NPM 变量

你可以通过向 package.json 文件添加自己的 NPM 变量。 它可以是任何 key,但我更喜欢将所有 NPM 变量放在 config key 中,以保持结构有序。 像这样:

bash 代码:
"config": {   "build_folder":"./dist" }

现在,如果你使用前面讨论的命令 npm run env | grep npm_ 列出你的变量,你会看到你的新变量在那里:

bash 代码:
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文件中的结构,即 config_build_folder 。

在 NPM script 中使用 NPM 变量

一旦你看到了完整的变量列表,并且你希望在 script 中使用这些变量中的任何一个的值,那么你就可以在 package.json 中执行此操作(请参阅上一节中变量 npm_package_config_build_folder 的值)

bash 代码:
"scripts": {  "build": "gulp build --dist $npm_package_config_build_folder"}

一旦你用 npm run build 运行这个命令,它将被执行为

bash 代码:

gulp build --dist ./dist

总结:以上就是有关NPM 的一些有用的提示和技巧,希望对大家有所帮助。




以上是NPM中有哪些有用的提示和技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:npm是什麼下一篇:npm是什麼