這篇文章主要介紹npm快速開發(fā)技巧有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營銷，提供成都網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站開發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營銷、小程序設(shè)計(jì)、公眾號商城、等建站開發(fā)，創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)策劃專家，為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢。

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

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

• 安裝 ?—? 常規(guī)：npm install，簡寫：npm i。

• 測試 ?—? 常規(guī)：npm test，簡寫：npm t。

• 幫助 ?—? 常規(guī)：npm --help，簡寫：npm -h。

• 全局標(biāo)志 —? 常規(guī)： --global，簡寫：-g。

• 保存為開發(fā)依賴 - 常規(guī)： - save-dev，簡寫：-D。

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

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

不太常見的快捷鍵

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

安裝包信息將加入到optionalDependencies（可選階段的依賴）- 常規(guī)：--save-optional， 簡寫：-O。
精確安裝指定模塊版本 - 常規(guī)：--save-optional， 簡寫：-O。
如果需要在本地保存一個npm包，或者通過單個文件下載選擇一組可用的包，可以使用--save-bundle或-B將它們捆綁在一起，并使用npm pack獲得捆綁包。

根的快捷方式

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

{
 "main": "index.js"
}

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

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

當(dāng)運(yùn)行npm init開始一個新項(xiàng)目時(shí)，你可能會發(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可以通過直接在打開的配置文件編輯信息。 如果要編輯全局npm設(shè)置，使用npm config edit -g。

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

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

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

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

3. 讓腳本跨平臺兼容

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

謝天謝地，解決方案很簡單。有幾個選項(xiàng)可供選擇，但效果最好的是cross-env。使用npm i -D cross-env將其作為開發(fā)依賴項(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)跨平臺兼容性的最無縫的方法，但還有其他兩個流行的工具，它們可以幫助實(shí)現(xiàn)跨平臺兼容性：

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

4. 并行運(yùn)行腳本

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

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

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

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

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

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

cd folder && npm start && cd ..

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

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

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

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

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

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

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

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

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

7. 列出并選擇可用腳本

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

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

npm i -g ntl

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

8. 運(yùn)行前后腳本

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

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

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

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

{
 "predeploy": "npm version patch"
}

10. 從命令行編輯 package.json

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

npm install -g json

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

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

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

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

如果你的項(xiàng)目已經(jīng)連接到遠(yuǎn)程存儲庫，并且已經(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腳本

讓我們更進(jìn)一步，使用我們自己的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被指向正確的文件，可以運(yùn)行:

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

在集成git之前，這里有一個簡單的.npm-init.js文件，它模擬了默認(rèn)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方法。

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

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

為了將git命令合并到.npm-init.js文件中，需要一種方法來控制命令行。為此，我們可以使用child_process 模塊。在文件的頂部引入它，因?yàn)槲覀冎恍枰猠xecSync函數(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進(jìn)一步實(shí)現(xiàn)這一點(diǎn)，這樣就不需要創(chuàng)建一個新的存儲庫，這部分留給你們自己完成。

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

以上是“npm快速開發(fā)技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁名稱：npm快速開發(fā)技巧有哪些
網(wǎng)站鏈接：http://jinyejixie.com/article44/poeche.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、靜態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站策劃、網(wǎng)站改版、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)