摘要：每天，數(shù)以百萬(wàn)計(jì)的開(kāi)發(fā)人員使用或來(lái)構(gòu)建項(xiàng)目。在本文中，我們將會(huì)介紹的個(gè)技巧來(lái)最大限度地利用從簡(jiǎn)單的快捷方式到自定義腳本。保存為開(kāi)發(fā)依賴(lài)常規(guī)，簡(jiǎn)寫(xiě)。首先通過(guò)安裝開(kāi)發(fā)依賴(lài)。在下一個(gè)也是最后一個(gè)技巧中，我們將合并。

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

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

但是npm不僅僅是初始化項(xiàng)目或安裝包。在本文中，我們將會(huì)介紹 npm 的13個(gè)技巧來(lái)最大限度地利用npm:從簡(jiǎn)單的快捷方式到自定義腳本。

由于我們中的許多人每天都使用npm，從長(zhǎng)遠(yuǎn)來(lái)看，即使節(jié)省少量的時(shí)間也會(huì)產(chǎn)生顯著的影響。這些技巧是針對(duì)初學(xué)者和中級(jí)開(kāi)發(fā)人員的，但是即使您是一位經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員，我希望你仍然能夠找到一到兩個(gè)你以前沒(méi)有遇到過(guò)的特性。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

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

設(shè)置默認(rèn)npm init屬性

讓腳本跨平臺(tái)兼容

并行運(yùn)行腳本

在不同的目錄中運(yùn)行腳本

延遲運(yùn)行腳本直到端口準(zhǔn)備就緒

列出并選擇可用腳本

運(yùn)行前后腳本

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

從命令行編輯package.json

自動(dòng)設(shè)置和打開(kāi)你的github庫(kù)

自定義npm init腳本

使用自定義npm init腳本將你的第一個(gè) Commit 提交到 GitHub

我們從最基本的開(kāi)始,學(xué)習(xí)最常見(jiàn)的npm快捷方式從長(zhǎng)遠(yuǎn)來(lái)將會(huì)節(jié)省很多時(shí)間。

安裝 ?—? 常規(guī)：npm install，簡(jiǎn)寫(xiě)：npm i。

測(cè)試 ?—? 常規(guī)：npm test，簡(jiǎn)寫(xiě)：npm t。

幫助 ?—? 常規(guī)：npm --help，簡(jiǎn)寫(xiě)：npm -h。

全局標(biāo)志 —? 常規(guī)： --global，簡(jiǎn)寫(xiě)：-g。

保存為開(kāi)發(fā)依賴(lài) - 常規(guī)： - save-dev，簡(jiǎn)寫(xiě)：-D。

npm init 默認(rèn)值 - 常規(guī)：npm init --yes 或 npm init --force，簡(jiǎn)寫(xiě)：npm init -y 或 npm init -f

我們知道使用-save或-S來(lái)保存包，但現(xiàn)在這是個(gè)已經(jīng)是默認(rèn)值。要安裝一個(gè)包而不保存它，可以使用 ——no-save標(biāo)志。

還有一些不常見(jiàn)的快捷方式，如下：

安裝包信息將加入到optionalDependencies（可選階段的依賴(lài)）- 常規(guī)：--save-optional， 簡(jiǎn)寫(xiě)：-O。

精確安裝指定模塊版本 - 常規(guī)：--save-optional， 簡(jiǎn)寫(xiě)：-O。

如果需要在本地保存一個(gè)npm包，或者通過(guò)單個(gè)文件下載選擇一組可用的包，可以使用--save-bundle或-B將它們捆綁在一起，并使用npm pack獲得捆綁包。

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

{
  "main": "index.js"
}

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

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

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可以通過(guò)直接在打開(kāi)的配置文件編輯信息。 如果要編輯全局npm設(shè)置，使用npm config edit -g。

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

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

上面的腳本將重置用戶(hù)默認(rèn)值，下面的腳本將重置全局默認(rèn)值

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

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

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

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

cross-env是 實(shí)現(xiàn)跨平臺(tái)兼容性的最無(wú)縫的方法，但還有其他兩個(gè)流行的工具，它們可以幫助實(shí)現(xiàn)跨平臺(tái)兼容性：

rimraf 可以安裝在全球運(yùn)行跨平臺(tái)腳本

ShellJS 是Unix shell命令在Node.js API上的可移植實(shí)現(xiàn)。

可以使用&&來(lái)依次運(yùn)行兩個(gè)或多個(gè)進(jìn)程。但是并行運(yùn)行腳本呢?為此，我們可以從各種npm包中進(jìn)行選擇。concurrent 和 npm-run-all 是最流行的解決方案。

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

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

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

第一種是手動(dòng) cd 并運(yùn)行對(duì)應(yīng)的命令：

cd folder && npm start && cd ..

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

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

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

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

通常，在開(kāi)發(fā)全堆棧應(yīng)用程序期間，咱們可能希望同時(shí)啟動(dòng)服務(wù)器和客戶(hù)端。wait-on 節(jié)點(diǎn)模塊提供了一種方便的方法來(lái)確保進(jìn)程只在某些進(jìn)程就緒時(shí)發(fā)生:在我們的例子中，我們有一個(gè)特定的端口。

例如，這是我在使用React前端的Electron項(xiàng)目中使用的dev腳本。 同時(shí)使用，腳本并行加載表示層和Electron窗口。 但是，使用wait-on，只有在 http://localhost:3000 啟動(dòng)好，才會(huì)打開(kāi)Electron窗口。

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

此外，React默認(rèn)情況下會(huì)打開(kāi)一個(gè)瀏覽器窗口，但對(duì)于 Electron 開(kāi)發(fā)來(lái)說(shuō)，這是不必要的。咱們可以通過(guò)傳遞環(huán)境變量BROWSER=none來(lái)禁用此行為。

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

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

npm i -g ntl

然后在項(xiàng)目文件夾中運(yùn)行ntl命令，可以獲得一個(gè)可用腳本列表，并可以選擇其中一個(gè)運(yùn)行。

你可能熟悉prebuild和postbuild這樣的腳本，它們?cè)试S你定義在構(gòu)建腳本之前或之后運(yùn)行的代碼。但事實(shí)上，pre和post可以在任何腳本之前添加，包括自定義腳本。

這不僅使你的代碼更干凈，而且還允許你多帶帶運(yùn)行pre和post腳本。

與手動(dòng)更改應(yīng)用程序的版本相比，npm 提供了一些有用的快捷方式來(lái)完成這一點(diǎn)。 要增加版本，請(qǐng)?jiān)谶\(yùn)行 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)用程序的頻率，可以通過(guò)在每次部署時(shí)增加版本號(hào)來(lái)節(jié)省時(shí)間，使用以下腳本:

{
  "predeploy": "npm version patch"
}

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

npm install -g json

然后，可以使用它來(lái)使用-I進(jìn)行就地編輯。 例如，要添加值為“bar”的新腳本“foo”，這樣寫(xiě)：

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

如果package.json文件中有“repository”，則可以通過(guò)輸入 npm repo在默認(rèn)瀏覽器中打開(kāi)它。

如果你的項(xiàng)目已經(jīng)連接到遠(yuǎn)程存儲(chǔ)庫(kù)，并且已經(jīng)在命令行上安裝了git，那您可以使用這個(gè)命令找到你的連接存儲(chǔ)庫(kù)

git config --get remote.origin.url

更好的是，如果你按照上面的提示并安裝了json模塊，可以使用下面的腳本自動(dòng)將正確的存儲(chǔ)庫(kù)添加到 package.json

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

讓我們更進(jìn)一步，使用我們自己的npm init腳本，它接受GitHub存儲(chǔ)庫(kù)URL并自動(dòng)推送我們的第一個(gè)提交。在本技巧中，我們將討論如何創(chuàng)建自定義npm init腳本。在下一個(gè)(也是最后一個(gè))技巧中，我們將合并git。

可以通過(guò)重定向到主目錄中的.npm-init.js文件來(lái)編輯npm init腳本。（在Windows上，通常是 c/Users/<用戶(hù)名>，在 Mac 上，它是/Users/<用戶(hù)名>）。

讓我們首先在我們的主目錄中創(chuàng)建一個(gè).nmm-init.js文件。為了確保npm init被指向正確的文件，可以運(yùn)行:

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

在集成git之前，這里有一個(gè)簡(jiǎn)單的.npm-init.js文件，它模擬了默認(rèn)npm init的問(wèn)題

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  (joebloggs.com)"),
  license: prompt("license", "ISC")
}

每個(gè)問(wèn)題都遵循nameInPackage模式:prompt("nameInPrompt","defaultValue")。要在缺省情況下設(shè)置值而不帶問(wèn)題，只需刪除prompt方法。

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

為了將git命令合并到.npm-init.js文件中，需要一種方法來(lái)控制命令行。為此，我們可以使用child_process 模塊。在文件的頂部引入它，因?yàn)槲覀冎恍枰?b>execSync函數(shù)，所以可以使用析構(gòu)賦值語(yǔ)法自己獲取它：

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

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

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

最后，我們將提示輸入GitHub存儲(chǔ)庫(kù)URL，如果提供，我們將生README.md文件，并啟動(dòng)我們的第一次提交。

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;
})

總的來(lái)說(shuō)，.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  (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  (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"
}

你也可以通過(guò)合并GitHub API進(jìn)一步實(shí)現(xiàn)這一點(diǎn)，這樣就不需要?jiǎng)?chuàng)建一個(gè)新的存儲(chǔ)庫(kù)，這部分留給你們自己完成。

總的來(lái)說(shuō)，希望這篇文章能夠讓你了解npm可以實(shí)現(xiàn)的目標(biāo)，并展示了一些提高工作效率的方法 - 無(wú)論是你知道常見(jiàn)的快捷方式，還是通過(guò)充分利用腳本 package.json，或編寫(xiě)自定義版本的npm init。

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

干貨系列文章匯總?cè)缦?，覺(jué)得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

https://github.com/qq44924588...

我是小智，公眾號(hào)「大遷世界」作者，對(duì)前端技術(shù)保持學(xué)習(xí)愛(ài)好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨，在進(jìn)階的路上，共勉！

關(guān)注公眾號(hào)，后臺(tái)回復(fù)福利，即可看到福利，你懂的。