每天，數以百萬計的開發人員使用npm或yarn來構建專案。執行npminit或npx create- response -app等命令幾乎構建js專案的首選方式，無論是為客戶端或伺服器端，還是桌面應用程式。

但是npm不僅僅是初始化專案或安裝包。在本文中，我們將會介紹npm的13個技巧來最大限度地利用npm:從簡單的快捷方式到自定義指令碼。

由於我們中的許多人每天都使用npm，從長遠來看，即使節省少量的時間也會產生顯著的影響。這些技巧是針對初學者和中級開發人員的，但是即使您是一位經驗豐富的開發人員，我希望你仍然能夠找到一到兩個你以前沒有遇到過的特性。

主要內容

1. 學習基本快捷方式
2. 設定預設npm init屬性
3. 讓指令碼跨平臺相容
4. 並行執行指令碼
5. 在不同的目錄中執行指令碼
6. 延遲執行指令碼直到埠準備就緒
7. 列出並選擇可用指令碼
8. 執行前後指令碼
9. 控制應用程式版本
10. 從命令列編輯package.json
11. 自動設定和開啟你的github庫
12. 自定義npm init指令碼
13. 使用自定義npm init指令碼將你的第一個 Commit 提交到 GitHub

1.學習基本快捷方式

我們從最基本的開始,學習最常見的npm快捷方式從長遠來將會節省很多時間。

• 安裝  —  常規：npm install，簡寫：npm i。
• 測試  —  常規：npm test，簡寫：npm t。
• 幫助  —  常規：npm --help，簡寫：npm -h。
• 全域性標誌 —  常規：--global，簡寫：-g。
• 儲存為開發依賴 - 常規：- save-dev，簡寫：-D。
• npm init 預設值 - 常規：npm init --yes或npm init --force，簡寫：npm init -y或npm init -f

我們知道使用-save或-S來儲存包，但現在這是個已經是預設值。要安裝一個包而不儲存它，可以使用——no-save標誌。

不太常見的快捷鍵

還有一些不常見的快捷方式，如下：

• 安裝包資訊將加入到optionalDependencies（可選階段的依賴）- 常規：--save-optional， 簡寫：-O。
• 精確安裝指定模組版本 - 常規：--save-optional， 簡寫：-O。

如果需要在本地儲存一個npm包，或者通過單個檔案下載選擇一組可用的包，可以使用--save-bundle或-B將它們捆綁在一起，並使用npm pack獲得捆綁包。

根的快捷方式

.符號通常用於表示應用程式的根目錄，npm術語中的應用程式入口點，即package.json中指定為“main”的值

{
  "main": "index.js"
}

這個快捷方式也可以用於像npx create-react-app .這樣的命令。因此，可以執行npx create-react-app .，而不是使用npx create-react-app my-app建立一個新的my-app目錄。

2. 設定預設npm init屬性

當執行npm init開始一個新專案時，你可能會發現自己一次又一次地輸入配置細節。假如，你可能是專案的主要負責人。有時為了節省時間，可以為這些欄位設定預設值，如下所示：

npm config set init.author.name "Joe Bloggs"
npm config set init.author.email "JoebLoggs@gmail.com"
npm config set init.author.url "Joebloggs.com"
npm config set init.license "MIT"

要檢查是否正確添加了這些屬性，在終端輸入npm config edit檢視配置檔案資訊。當然也j可以通過直接在開啟的配置檔案編輯資訊。 如果要編輯全域性npm設定，使用npm config edit -g。

要重新初始化預設設定，可以使用以下指令碼。第一行用空字串替換配置檔案，第二行用預設設定重新填充配置檔案。

echo "" > $(npm config get userconfig)
npm config edit

上面的指令碼將重置使用者預設值，下面的指令碼將重置全域性預設值

echo "" > $(npm config get globalconfig)
npm config --global edit

3. 讓指令碼跨平臺相容

任何在命令列上執行的程式碼都有相容性問題的風險，特別是在Windows和基於unix的系統(包括Mac和Linux)之間。如果你只處理特定的專案，那麼這不是問題，但是在許多情況下，跨平臺相容性很有必要的:任何開放原始碼或協作專案，以及示例和教程專案，都應該能夠工作，而不管作業系統是什麼。

謝天謝地，解決方案很簡單。有幾個選項可供選擇，但效果最好的是cross-env。使用npm i -D cross-env將其作為開發依賴項安裝。然後在任何環境變數之前包括關鍵字cross-env，就像這樣：

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/wepack.config.js"
  }
}

cross-env是實現跨平臺相容性的最無縫的方法，但還有其他兩個流行的工具，它們可以幫助實現跨平臺相容性：

• rimraf可以安裝在全球執行跨平臺指令碼
• ShellJS是Unix shell命令在Node.js API上的可移植實現。

4. 並行執行指令碼

可以使用&&來依次執行兩個或多個程序。但是並行執行指令碼呢?為此，我們可以從各種npm包中進行選擇。concurrent和npm-run-all是最流行的解決方案。

首先通過 npm i -D concurrently 安裝開發依賴。然後按照以下格式將其新增到指令碼中：

{
  "start": "concurrently \"command1 arg\" \"command2 arg\""
}

5. 在不同的目錄中執行指令碼

有時，在不同的資料夾中擁有一個包含多個package.json檔案的應用程式。 從根目錄訪問這些指令碼會很方便，而不是每次要執行指令碼時導航到不同的資料夾，有兩種方法可以執行此操作。

第一種是手動 cd 並執行對應的命令：

cd folder && npm start && cd ..

但還有一個更優雅的解決方案，即使用--prefix標誌指定路徑:

npm start --prefix path/to/your/folder

下面是一個工作應用程式中此解決方案的示例，我們希望在前端(在客戶機目錄中)和後端(在伺服器目錄中)執行npm start。

"start": "concurrently \"(npm start --prefix client)\" \"(npm start --prefix server)\"",

6. 延遲執行指令碼直到埠準備就緒

通常，在開發全堆疊應用程式期間，咱們可能希望同時啟動伺服器和客戶端。wait-on節點模組提供了一種方便的方法來確保程序只在某些程序就緒時發生:在我們的例子中，我們有一個特定的埠。

例如，這是我在使用React前端的Electron專案中使用的dev指令碼。 同時使用，指令碼並行載入表示層和Electron視窗。 但是，使用wait-on，只有在http://localhost:3000啟動好，才會開啟Electron視窗。

"dev": "concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",

此外，React預設情況下會開啟一個瀏覽器視窗，但對於 Electron 開發來說，這是不必要的。咱們可以通過傳遞環境變數BROWSER=none來禁用此行為。

7. 列出並選擇可用指令碼

列出package.json檔案中可用的指令碼很簡單：只需轉到專案的根目錄並在終端中輸入npm run。

但是有一種更方便的方法可以獲得指令碼列表，可以立即執行該列表:為此，全域性安裝 NTL (npm任務列表)模組:

npm i -g ntl

然後在專案資料夾中執行ntl命令，可以獲得一個可用指令碼列表，並可以選擇其中一個執行。

8. 執行前後指令碼

你可能熟悉prebuild和postbuild這樣的指令碼，它們允許你定義在構建指令碼之前或之後執行的程式碼。但事實上，pre和post可以在任何指令碼之前新增，包括自定義指令碼。

這不僅使你的程式碼更乾淨，而且還允許你單獨執行pre和post指令碼。

9. 控制應用程式版本

與手動更改應用程式的版本相比，npm 提供了一些有用的快捷方式來完成這一點。 要增加版本，請在執行npm version加上major，minor或patch`：

// 1.0.0
npm version patch
// 1.0.1
npm version minor
// 1.1.0
npm version major
// 2.0.0

根據更新應用程式的頻率，可以通過在每次部署時增加版本號來節省時間，使用以下指令碼:

{
  "predeploy": "npm version patch"
}

10. 從命令列編輯 package.json

package.json是一個常規的json檔案，因此可以使用工具庫json從命令列進行編輯。 這在修改package.json提供另外一種新的方式，允許w你q建立超出預設值的快捷方式。 全域性安裝：

npm install -g json

然後，可以使用它來使用-I進行就地編輯。 例如，要新增值為“bar”的新指令碼“foo”，這樣寫：

json -I -f package.json -e 'this.scripts.foo="bar"'

11. 自動設定和開啟你的github庫

如果package.json檔案中有“repository”，則可以通過輸入npm repo在預設瀏覽器中開啟它。

如果你的專案已經連線到遠端儲存庫，並且已經在命令列上安裝了git，那您可以使用這個命令找到你的連線儲存庫

git config --get remote.origin.url

更好的是，如果你按照上面的提示並安裝了json模組，可以使用下面的指令碼自動將正確的儲存庫新增到package.json

json -I -f package.json -e "this.repository=\"$(git config --get remote.origin.url)\""

12. 自定義npm init指令碼

讓我們更進一步，使用我們自己的npm init指令碼，它接受GitHub儲存庫URL並自動推送我們的第一個提交。在本技巧中，我們將討論如何建立自定義npm init指令碼。在下一個(也是最後一個)技巧中，我們將合併git。

可以通過重定向到主目錄中的.npm-init.js檔案來編輯npm init指令碼。（在Windows上，通常是c/Users/<使用者名稱>，在 Mac 上，它是/Users/<使用者名稱>）。

讓我們首先在我們的主目錄中建立一個.nmm-init.js檔案。為了確保npm init被指向正確的檔案，可以執行:

npm config set init-module ~\.npm-init.js

在整合git之前，這裡有一個簡單的.npm-init.js檔案，它模擬了預設npm init的問題

module.exports = {
  name: prompt('package name', basename || package.name),
  version: prompt('version', '0.0.0'),
  decription: prompt('description', ''),  
  main: prompt('entry point', 'index.js'),
  repository: prompt('git repository', ''),
  keywords: prompt(function (s) { return s.split(/\s+/) }),
  author: prompt('author', 'Joe Bloggs <[email protected]> (joebloggs.com)'),
  license: prompt('license', 'ISC')
}

每個問題都遵循nameInPackage模式:prompt('nameInPrompt','defaultValue')。要在預設情況下設定值而不帶問題，只需刪除prompt方法。

如果要返回預設設定，只需刪除.npm-init.js。

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

13. 使用自定義npm init指令碼將你的第一個 Commit 提交到 GitHub

為了將git命令合併到.npm-init.js檔案中，需要一種方法來控制命令列。為此，我們可以使用child_process模組。在檔案的頂部引入它，因為我們只需要execSync函式，所以可以使用析構賦值語法自己獲取它：

const { execSync } = require('child_process');

我還建立了一個helper函式，它將函式的結果列印到控制檯：

function run(func) {
  console.log(execSync(func).toString())
}

最後，我們將提示輸入GitHub儲存庫URL，如果提供，我們將生README.md檔案，並啟動我們的第一次提交。

repository: prompt('github repository url', '', function (url) {
  if (url) {
    run('touch README.md');
    run('git init');
    run('git add README.md');
    run('git commit -m "first commit"');
    run(`git remote add origin ${url}`);
    run('git push -u origin master');
  }
  return url;
})

總的來說，.npm-init.js檔案大概如下：

const { execSync } = require('child_process');

function run(func) {
  console.log(execSync(func).toString())
}

module.exports = {
  name: prompt('package name', basename || package.name),
  version: prompt('version', '0.0.0'),
  decription: prompt('description', ''),
  main: prompt('entry point', 'index.js'),
  keywords: prompt(function (s) { return s.split(/\s+/) }),
  author: prompt('author', 'Joe Bloggs <[email protected]> (joebloggs.com)'),
  license: prompt('license', 'ISC'),
  repository: prompt('github repository url', '', function (url) {
    if (url) {
      run('touch README.md');
      run('git init');
      run('git add README.md');
      run('git commit -m "first commit"');
      run(`git remote add origin ${url}`);
      run('git push -u origin master');
    }
    return url;
  }),
}

package.json檔案：

{
  "name": "Custom npm init",
  "version": "0.0.0",
  "decription": "A test project, to demonstrate a custom npm init script.",
  "main": "index.js",
  "keywords": [],
  "author": "Joe Bloggs <[email protected]> (joebloggs.com)",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/JoeBloggs/custom.git"
  },
  "bugs": {
    "url": "https://github.com/JoeBloggs/custom/issues"
  },
  "homepage": "https://github.com/JoeBloggs/custom#readme"
}

你也可以通過合併GitHub API進一步實現這一點，這樣就不需要建立一個新的儲存庫，這部分留給你們自己完成。

總的來說，希望這篇文章能夠讓你瞭解npm可以實現的目標，並展示了一些提高工作效率的方法 - 無論是你知道常見的快捷方式，還是通過充分利用指令碼package.json，或編寫自定義版本的npm init。