13 個 NPM 快速開發技巧

摘要：玩轉npm。

作者：前端小智
原文： 13 個 npm 快速開發技巧

經授權轉載，版權歸原作者所有。

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

每天，數以百萬計的開發人員使用

npm

或

yarn

來建構項目。運作

npm init

npx create- response -app

等指令幾乎建構JS項目的首選方式，無論是為用戶端或伺服器端，還是桌面應用程式。

但是

npm

不僅僅是初始化項目或安裝包。在本文中，我們将會介紹

npm

的13個技巧來最大限度地利用

npm

:從簡單的快捷方式到自定義腳本。

由于我們中的許多人每天都使用

npm

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

主要内容

學習基本快捷方式
設定預設npm init屬性
讓腳本跨平台相容
并行運作腳本
在不同的目錄中運作腳本
延遲運作腳本直到端口準備就緒
列出并選擇可用腳本
運作前後腳本
控制應用程式版本
從指令行編輯package.json
自動設定和打開你的github庫
自定義 npm init 腳本
使用自定義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 "[email protected]"
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

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

關于Fundebug

專注于JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有陽光保險、核桃程式設計、荔枝FM、掌門1對1、微脈、青團社等衆多品牌企業。歡迎大家

免費試用

！

13 個 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

關于Fundebug

繼續閱讀

ECOMP平台開源，AT&T持續發力SDN/NFV

AT&T開發出400 GbE試驗的SDN控制器

容器網絡：專為開發人員設計的SDN系統

AT&T開發出可進行400Gbe試驗的SDN控制器

AT&T加入Verizon與KT的合作圈，共同開發SDN/NFV/5G

安卓開發:簡單的登陸跳轉_APK實作直接跳轉到本CSDN部落格

我的Java開發學習之旅------&gt;計算從1到N中1的出現次數的效率優化問題

一起談.NET技術，MSDN Webcast：ASP.NET MVC2程式開發入門到精通系列課程

GPS北鬥雙模技術應用開發研究--資料解析

GPS北鬥雙模技術應用開發研究--幾個基本關鍵詞

如何快速開發一個IM系統為什麼不簡單為什麼簡單介紹4. 核心代碼邏輯運作感受

如何快速開發一個IM系統為什麼不簡單為什麼簡單介紹運作感受

阿裡雙十一大屏六年路2012年2013年2014年2015年2016年2017年2018年回顧之後總要有點廢話（正經總結）在這裡

北鬥三号開啟全球服務，與GPS正面抗衡

地圖編輯插件實踐指南

基于SpringBoot+mybatis-plus的快速開發系統

13 個 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

關于Fundebug

繼續閱讀

12. 自定義 `npm init`