13 個 npm 快速開發技巧

譯者：前端小智

原文：medium.com/@bretcamero…

爲了保證的可讀性，本文采用意譯而非直譯。

爲了回饋讀者，《大遷世界》不按期舉行(每月一到三次)，現金抽獎活動，保底200，外加用戶讚揚，但願你能成爲大遷世界的小錦鯉，快來試試吧

阿里雲最近在作活動，低至2折，有興趣能夠看看：promotion.aliyun.com/ntms/yunpar…

---

天天，數以百萬計的開發人員使用 npm 或 yarn 來構建項目。運行npm init或npx create- response -app等命令幾乎構建JS項目的首選方式，不管是爲客戶端或服務器端，仍是桌面應用程序。

可是npm不只僅是初始化項目或安裝包。在本文中，咱們將會介紹 npm 的13個技巧來最大限度地利用npm:從簡單的快捷方式到自定義腳本。

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

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你！

主要內容

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 <joe.bloggs@gmail.com> (joebloggs.com)'),
  license: prompt('license', 'ISC')
}
複製代碼

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

若是要返回默認設置，只需刪除.npm-init.js。

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 <joe.bloggs@gmail.com> (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 <joe.bloggs@gmail.com> (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。

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

交流（歡迎加入羣，羣工做日都會發紅包，互動討論技術）

阿里雲最近在作活動，低至2折，有興趣能夠看看：promotion.aliyun.com/ntms/yunpar…

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

github.com/qq449245884…

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。