使用 packagejson 腳本增強“npm run dev”

npm run dev 是“本地運行我的網(wǎng)站”的標準，但它是如何工作的呢？我們?nèi)绾螖U展它的功能？在這篇文章中，我們將看看：

• 如何配置 npm run dev 的功能。
• 如何將復雜的命令分解為細粒度的單元。
• 如何并行運行多個命令。
• 如何在不失去正常 ctrl-c 行為的情況下運行先決條件。
• 啟動 convex 后端時如何添加種子數(shù)據(jù)（如果不存在）。

作為一個激勵示例，以下是凸幫助程序示例應用程序中定義的一些腳本。我們將介紹每個部分的作用

  "scripts": {
    "dev": "npm-run-all --parallel dev:backend dev:frontend",
    "build": "tsc && vite build",
    "dev:backend": "convex dev",
    "dev:frontend": "vite",
    "predev": "convex dev --until-success",
    "test": "vitest"
  },

它們的定義方式和位置

npm run 運行項目工作區(qū)中 package.json 中定義的命令。當您從 npm create vite@latest 等命令啟動存儲庫時，這些命令通常是預先配置的，其中的命令為：

• dev：運行開發(fā)環(huán)境。這通常包括在文件更改時自動重新加載 ui。對于 vite 來說，這是 vite，next.js 是下一個 dev。
• build：構(gòu)建用于部署的網(wǎng)站。這通常會編譯并捆綁所有 html、css 和 javascript。對于 vite，這是 vite 構(gòu)建，next.js 是下一個構(gòu)建。
• test：運行測試 - 如果您使用 jest，則只需“test”：“jest”或 vitest for vitest。

這是來自 next.js 的基本示例：

// in package.json
{
// ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
//...

在這里你可以運行 npm run dev 或 npm run lint 等

您可以在文檔中了解有關(guān) npm run 的更多信息。

為什么使用腳本？

這是一個公平的問題，為什么人們會將已經(jīng)如此簡單的命令放入包腳本中。為什么不直接調(diào)用 jest 或 vite 或 next build 呢？有幾個很好的理由：

1. 您可以保存命令的默認參數(shù)，這樣您就不必記住或記錄啟動某項操作的“標準”方式。我們將在下面看到如何將其配置為鏈接命令并并行運行其他命令。
2. 它允許您輕松運行由 npm 安裝但無法從 shell（終端）全局訪問的命令。¹ 當您安裝 npm install -d vitest 之類的東西時，它會將 vitest 安裝到 node_modules/.bin 中。²你不能直接在 shell 中運行 vitest，³ 但你可以有一個像這樣的配置： "scripts": { "test": "vitest" } 并且 npm run test 將運行 vitest.
3. 即使您位于子目錄中，它也始終以包文件夾的根目錄作為“當前目錄”運行。因此，您可以定義一個類似 "foo": "./myscript.sh" 的腳本，它總是會在包根目錄中（與 package.json 位于同一目錄中）查找 myscript.sh。注意：您可以通過 init_cwd 環(huán)境變量訪問當前調(diào)用的目錄。
4. 當腳本從 npm run 運行時，您可以輕松引用 package.json 中的變量。例如，您可以使用 npm_package_version 環(huán)境變量訪問包的“版本”，例如 js 中的 process.env.npm_package_version 或腳本中的 $npm_package_version 。
5. 如果你有多個工作區(qū)（許多目錄都有自己的 package.json，并通過“workspaces”配置配置到父 package.json 中），你可以使用 npm test --workspaces 或使用 npm run 在所有工作區(qū)中運行相同的命令lint --workspace 應用程序/web.

npm run dev 可以與yarn/pnpm/bun一起使用嗎？

是的！即使您使用其他包管理器安裝依賴項，您仍然可以使用 npm 運行包腳本。

yarn # similar to `npm install`
npm run dev # still works!

您不必記住 npm run dev 映射到y(tǒng)arn dev（或yarn run dev）。 npx 也是如此：無論您使用什么包管理器來安裝東西，npx 凸開發(fā)都可以工作。

并行運行命令

有幾個包可以用來同時運行命令：⁴

1. npm-run-all
2. 同時

我們在這里只看一下 npm-run-all 。考慮我們的例子：

  "scripts": {
    "dev": "npm-run-all --parallel dev:backend dev:frontend",
    "dev:backend": "convex dev",
    "dev:frontend": "vite",
  },

這定義了三個腳本。

1. npm run dev:后端運行凸開發(fā)。
2. npm run dev:frontend 運行 vite。
3. npm run dev 通過 npm-run-all 并行運行凸開發(fā)和 vite。

兩個輸出都會流出，并且執(zhí)行 ctrl-c 會中斷兩個腳本。

預開發(fā)？后期構(gòu)建？

您可以通過將命令命名為 prex 或 postx 來指定在另一個命令（例如 x）之前（前）或之后（后）運行的命令。在示例中：

  "scripts": {
    "dev": "npm-run-all --parallel dev:backend dev:frontend",
    "dev:backend": "convex dev",
    "dev:frontend": "vite",
    "predev": "convex dev --until-success",
  },

這將在 npm-run-all --parallel dev:backend dev:frontend 的“dev”命令之前運行凸開發(fā) --until-success。

用“&&”鏈接

對于習慣 shell 腳本的人來說，如果前一個命令成功，則可以按順序運行兩個命令：commanda && commandb。這適用于 windows 和 unix (mac / linux)。

但是，僅使用預先腳本有幾個優(yōu)點：

1. 您可以使用 npm run dev --ignore-scripts 運行任一命令以不執(zhí)行“predev”腳本，或者 npm run predev 顯式地僅執(zhí)行“predev”步驟。
2. 根據(jù)我的經(jīng)驗，ctrl-c 的行為更容易預測。在不同的 shell 環(huán)境中，執(zhí)行 ctrl-c（向當前進程發(fā)送中斷信號）有時會終止第一個腳本，但仍運行第二個腳本。經(jīng)過多次嘗試，我們決定切換到“predev”作為模式。

首先運行交互式步驟

對于 convex，當您第一次運行 npx 凸開發(fā)（或使用上述腳本的 npm run dev）時，如果您還沒有登錄，它會要求您登錄；如果尚未登錄，它會要求您設置項目設置。這很棒，但是當多個命令同時傳輸輸出時，更新輸出文本的交互式命令不能很好地工作。這是在 npx 凸 dev 之前運行 npx 凸 dev --until-success 的動機。

• 只要函數(shù)和模式與您部署的內(nèi)容不匹配，凸開發(fā)就會同步您的函數(shù)和模式，并監(jiān)視文件更改。
• --until-success 標志僅同步您的函數(shù)和模式，直到成功一次，告訴您如果出現(xiàn)問題要修復什么，并自動重試，直到成功或您按 ctrl-c 為止。
• 通過運行 npx凸開發(fā) --until-success，我們可以在嘗試啟動前端和后端之前完成登錄、項目配置和初始同步。
• 如果初始同步發(fā)現(xiàn)了諸如缺少環(huán)境變量之類的問題（需要在應用程序運行之前進行設置），那么它會特別有用。
• 這樣，在后端準備好使用其期望的函數(shù)版本處理請求之前，前端不會啟動。

啟動時播種數(shù)據(jù)

如果您將 convex 的“predev”命令更改為包含 --run ，它將在前端啟動之前運行服務器端功能。

  "scripts": {
      //...
    "predev": "convex dev --until-success --run init",
        //...
  },

--run init 命令將運行凸/init.ts 中默認導出的函數(shù)。您還可以運行 --run myfolder/mymodule:myfunction。請參閱此處有關(guān)命名的文檔。請參閱這篇關(guān)于播種數(shù)據(jù)的文章，但要點是您可以定義一個內(nèi)部突變來檢查數(shù)據(jù)庫是否為空，如果是，則插入一組記錄以用于測試/設置目的。

tsc？

如果您使用 typescript，您可以使用裸 tsc 運行類型檢查/編譯您的 typescript 文件。如果您的 tsconfig.json 配置為發(fā)出類型，它將寫出類型。如果沒有，它只會驗證類型。作為構(gòu)建的一部分，這非常好，因此您不會構(gòu)建任何有類型錯誤的東西。這就是上面例子的原因：

    "build": "tsc && vite build",

如何傳遞參數(shù)？

如果您想將參數(shù)傳遞給命令，例如將參數(shù)傳遞給測試命令以指定要運行的測試，您可以在after之后傳遞它們 - 以將命令與參數(shù)分開。從技術(shù)上講，你不需要 -- 如果你的參數(shù)是位置參數(shù)而不是 -- 前綴，但總是這樣做也沒什么壞處，以防你忘記為哪個而做。

npm run test -- --grep="pattern"

概括

我們研究了一些使用 package.json 腳本來簡化工作流程的方法。誰知道一個簡單的 npm run dev 背后可以蘊含多少力量？看看我們原來的例子：

  "scripts": {
    "dev": "npm-run-all --parallel dev:backend dev:frontend",
    "build": "tsc && vite build",
    "dev:backend": "convex dev",
    "dev:frontend": "vite",
    "predev": "convex dev --until-success",
    "test": "vitest"
  },

• dev 在 predev 之后并行運行前端和后端。
• build 在構(gòu)建靜態(tài)站點之前通過 tsc 進行類型檢查。
• dev:backend 在您編輯文件時不斷將后端功能部署到您的開發(fā)環(huán)境。
• dev:frontend 運行一個本地前端服務器，它會在您編輯文件時自動重新加載。
• predev 在 dev 之前運行，并根據(jù)需要進行初始部署、處理登錄、配置和初始同步。
• test 使用 vitest 來運行測試。注意：npm test 是 npm run test 以及其他命令的簡寫，但它們是特殊情況。 npm run test 是我建議的習慣。

1. 輸入 npm 時 shell 查找要運行的命令的方法是檢查 shell 的 path 環(huán)境變量（無論如何在 unix 機器上）。您可以使用 echo "$path" 看到您自己的。它檢查 $path 中指定的所有位置并使用第一個位置。 ??

2. 從技術(shù)上講，您可以覆蓋并指定 npm 安裝二進制文件的位置。??

3. 如果你真的想，你可以直接運行 npm exec vitest，簡稱 npx vitest，./npm_modules/.bin/vitest，或者將 .npm_modules/.bin 添加到你的 path 中。??

4. 有些人使用裸 & 在后臺運行一項任務，但這在 windows 上不受支持，并且中斷一個命令不一定會殺死另一個命令。??

以上就是使用 packagejson 腳本增強“npm run dev”的詳細內(nèi)容，更多請關(guān)注愛掏網(wǎng) - it200.com其它相關(guān)文章！