摘要： 玩轉(zhuǎn)npm哑蔫。

• 作者：前端小智
• 原文：13 個 npm 快速開發(fā)技巧

Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有茬射。

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

每天在抛，數(shù)以百萬計的開發(fā)人員使用 npm 或 yarn 來構(gòu)建項目。運行npm init或npx create- response -app等命令幾乎構(gòu)建JS項目的首選方式萧恕，無論是為客戶端或服務(wù)器端刚梭，還是桌面應(yīng)用程序。

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

由于我們中的許多人每天都使用npm惰说，從長遠來看，即使節(jié)省少量的時間也會產(chǎn)生顯著的影響缘回。這些技巧是針對初學(xué)者和中級開發(fā)人員的吆视，但是即使您是一位經(jīng)驗豐富的開發(fā)人員，我希望你仍然能夠找到一到兩個你以前沒有遇到過的特性酥宴。

主要內(nèi)容

1. 學(xué)習(xí)基本快捷方式
2. 設(shè)置默認npm init屬性
3. 讓腳本跨平臺兼容
4. 并行運行腳本
5. 在不同的目錄中運行腳本
6. 延遲運行腳本直到端口準備就緒
7. 列出并選擇可用腳本
8. 運行前后腳本
9. 控制應(yīng)用程序版本
10. 從命令行編輯package.json
11. 自動設(shè)置和打開你的github庫
12. 自定義npm init腳本
13. 使用自定義npm init腳本將你的第一個 Commit 提交到 GitHub

1. 學(xué)習(xí)基本快捷方式

我們從最基本的開始,學(xué)習(xí)最常見的npm快捷方式從長遠來將會節(jié)省很多時間啦吧。

• 安裝 ?—? 常規(guī)：npm install，簡寫：npm i拙寡。
• 測試 ?—? 常規(guī)：npm test授滓，簡寫：npm t。
• 幫助 ?—? 常規(guī)：npm --help肆糕，簡寫：npm -h般堆。
• 全局標志 —? 常規(guī)：--global，簡寫：-g诚啃。
• 保存為開發(fā)依賴 - 常規(guī)： - save-dev淮摔，簡寫：-D。
• npm init 默認值 - 常規(guī)：npm init --yes 或 npm init --force始赎，簡寫：npm init -y 或 npm init -f

我們知道使用-save或-S來保存包和橙，但現(xiàn)在這是個已經(jīng)是默認值。要安裝一個包而不保存它造垛，可以使用 ——no-save標志魔招。

不太常見的快捷鍵

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

• 安裝包信息將加入到optionalDependencies（可選階段的依賴）- 常規(guī)：--save-optional五辽， 簡寫：-O仆百。
• 精確安裝指定模塊版本 - 常規(guī)：--save-optional， 簡寫：-O奔脐。

如果需要在本地保存一個npm包俄周，或者通過單個文件下載選擇一組可用的包吁讨，可以使用--save-bundle或-B將它們捆綁在一起，并使用npm pack獲得捆綁包峦朗。

根的快捷方式

. 符號通常用于表示應(yīng)用程序的根目錄建丧，npm術(shù)語中的應(yīng)用程序入口點，即package.json中指定為“main”的值

{
  "main": "index.js"
}

這個快捷方式也可以用于像npx create-react-app . 這樣的命令波势。因此翎朱，可以運行npx create-react-app .，而不是使用 npx create-react-app my-app 創(chuàng)建一個新的my-app目錄尺铣。

2. 設(shè)置默認npm init屬性

當(dāng)運行npm init開始一個新項目時拴曲，你可能會發(fā)現(xiàn)自己一次又一次地輸入配置細節(jié)。假如凛忿，你可能是項目的主要負責(zé)人澈灼。有時為了節(jié)省時間，可以為這些字段設(shè)置默認值店溢，如下所示：

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查看配置文件信息。當(dāng)然也j可以通過直接在打開的配置文件編輯信息床牧。 如果要編輯全局npm設(shè)置荣回，使用npm config edit -g。

要重新初始化默認設(shè)置戈咳，可以使用以下腳本心软。第一行用空字符串替換配置文件，第二行用默認設(shè)置重新填充配置文件著蛙。

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

上面的腳本將重置用戶默認值糯累，下面的腳本將重置全局默認值

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

3. 讓腳本跨平臺兼容

任何在命令行上運行的代碼都有兼容性問題的風(fēng)險，特別是在Windows和基于unix的系統(tǒng)(包括Mac和Linux)之間册踩。如果你只處理特定的項目泳姐，那么這不是問題，但是在許多情況下暂吉，跨平臺兼容性很有必要的:任何開放源碼或協(xié)作項目胖秒，以及示例和教程項目，都應(yīng)該能夠工作慕的，而不管操作系統(tǒng)是什么旦事。

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

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

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

• rimraf 可以安裝在全球運行跨平臺腳本
• ShellJS 是Unix shell命令在Node.js API上的可移植實現(xiàn)。

4. 并行運行腳本

可以使用&&來依次運行兩個或多個進程摇肌。但是并行運行腳本呢?為此擂红，我們可以從各種npm包中進行選擇。concurrent 和 npm-run-all 是最流行的解決方案围小。

首先通過 npm i -D concurrently 安裝開發(fā)依賴昵骤。然后按照以下格式將其添加到腳本中：

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

5. 在不同的目錄中運行腳本

有時，在不同的文件夾中擁有一個包含多個package.json文件的應(yīng)用程序肯适。 從根目錄訪問這些腳本會很方便变秦，而不是每次要運行腳本時導(dǎo)航到不同的文件夾，有兩種方法可以執(zhí)行此操作框舔。

第一種是手動 cd 并運行對應(yīng)的命令：

cd folder && npm start && cd ..

但還有一個更優(yōu)雅的解決方案蹦玫，即使用--prefix標志指定路徑:

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

下面是一個工作應(yīng)用程序中此解決方案的示例，我們希望在前端(在客戶機目錄中)和后端(在服務(wù)器目錄中)運行 npm start雨饺。

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

6. 延遲運行腳本直到端口準備就緒

通常钳垮，在開發(fā)全堆棧應(yīng)用程序期間惑淳，咱們可能希望同時啟動服務(wù)器和客戶端额港。wait-on 節(jié)點模塊提供了一種方便的方法來確保進程只在某些進程就緒時發(fā)生:在我們的例子中，我們有一個特定的端口歧焦。

例如移斩，這是我在使用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 開發(fā)來說，這是不必要的搁痛。咱們可以通過傳遞環(huán)境變量BROWSER=none來禁用此行為长搀。

7. 列出并選擇可用腳本

列出package.json文件中可用的腳本很簡單：只需轉(zhuǎn)到項目的根目錄并在終端中輸入npm run。

但是有一種更方便的方法可以獲得腳本列表鸡典，可以立即運行該列表:為此源请，全局安裝 NTL (npm任務(wù)列表)模塊:

npm i -g ntl

然后在項目文件夾中運行ntl命令，可以獲得一個可用腳本列表，并可以選擇其中一個運行谁尸。

image

代碼部署后可能存在的BUG沒法實時知道舅踪，事后為了解決這些BUG，花了大量的時間進行l(wèi)og 調(diào)試症汹，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug硫朦。

8. 運行前后腳本

你可能熟悉prebuild和postbuild這樣的腳本，它們允許你定義在構(gòu)建腳本之前或之后運行的代碼背镇。但事實上咬展，pre和post可以在任何腳本之前添加，包括自定義腳本瞒斩。

這不僅使你的代碼更干凈破婆，而且還允許你單獨運行pre和post腳本。

9. 控制應(yīng)用程序版本

與手動更改應(yīng)用程序的版本相比胸囱，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

根據(jù)更新應(yīng)用程序的頻率裳扯，可以通過在每次部署時增加版本號來節(jié)省時間，使用以下腳本:

{
  "predeploy": "npm version patch"
}

10. 從命令行編輯 package.json

package.json是一個常規(guī)的json文件谤职，因此可以使用工具庫json從命令行進行編輯饰豺。 這在修改package.json提供另外一種新的方式，允許w你q創(chuàng)建超出默認值的快捷方式允蜈。 全局安裝：

npm install -g json

然后冤吨，可以使用它來使用-I進行就地編輯。 例如饶套，要添加值為“bar”的新腳本“foo”漩蟆，這樣寫：

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

11. 自動設(shè)置和打開你的github庫

如果package.json文件中有“repository”，則可以通過輸入 npm repo在默認瀏覽器中打開它妓蛮。

如果你的項目已經(jīng)連接到遠程存儲庫怠李，并且已經(jīng)在命令行上安裝了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并自動推送我們的第一個提交翘簇。在本技巧中，我們將討論如何創(chuàng)建自定義npm init腳本儿倒。在下一個(也是最后一個)技巧中版保，我們將合并git呜笑。

可以通過重定向到主目錄中的.npm-init.js文件來編輯npm init腳本。（在Windows上彻犁，通常是 c/Users/<用戶名>叫胁，在 Mac 上，它是/Users/<用戶名>）汞幢。

讓我們首先在我們的主目錄中創(chuàng)建一個.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')。要在缺省情況下設(shè)置值而不帶問題仲智，只需刪除prompt方法买乃。

如果要返回默認設(shè)置，只需刪除.npm-init.js钓辆。

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

為了將git命令合并到.npm-init.js文件中剪验，需要一種方法來控制命令行。為此前联，我們可以使用child_process 模塊功戚。在文件的頂部引入它，因為我們只需要execSync函數(shù)似嗤，所以可以使用析構(gòu)賦值語法自己獲取它：

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

我還創(chuàng)建了一個helper函數(shù)啸臀，它將函數(shù)的結(jié)果打印到控制臺：

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進一步實現(xiàn)這一點幌羞，這樣就不需要創(chuàng)建一個新的存儲庫寸谜，這部分留給你們自己完成。

總的來說属桦，希望這篇文章能夠讓你了解npm可以實現(xiàn)的目標熊痴，并展示了一些提高工作效率的方法 - 無論是你知道常見的快捷方式，還是通過充分利用腳本 package.json聂宾，或編寫自定義版本的npm init果善。

**代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG系谐，花了大量的時間進行l(wèi)og 調(diào)試巾陕，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug讨跟。

關(guān)于Fundebug

Fundebug專注于JavaScript、微信小程序鄙煤、微信小游戲晾匠、支付寶小程序、React Native梯刚、Node.js和Java線上應(yīng)用實時BUG監(jiān)控凉馆。 自從2016年雙十一正式上線，F(xiàn)undebug累計處理了10億+錯誤事件亡资，付費客戶有陽光保險澜共、核桃編程、荔枝FM锥腻、掌門1對1咳胃、微脈、青團社等眾多品牌企業(yè)旷太。歡迎大家免費試用展懈！