Npm 工作区 - 从根包调用工作区脚本

Question

我正在努力处理根 git 存储库中的多个 npm 包，并使用自定义开发脚本来处理启动、编译、构建等。现在我遇到了 npm 工作区，并想在我的以下项目结构中使用这个令人惊叹的新功能，但我无法让它工作：

projectx (root)
- package.json
- apps   
 -- backend
   -- src
   -- package.json (name: @projectx/backend, scripts: "dev":"ts-node or whatever")
 -- common
   -- src
   -- package.json (name: @projectx/common)
 -- frontend
   -- src
   -- package.json (name: @projectx/frontend, scripts: "dev":"webpack")

我的根package.json包含：

    {
  "name": "packagex",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "private": "true",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "back:dev": "npm workspace @projectx/backend dev",
    "front:dev": "npm workspace @projectx/frontend dev",
    "dev": "run-p back:dev front:dev"
  },
  "workspaces": [
    "apps/*"
  ],
  "repository": {
    "type": "git",
    "url": "git_url"
  },
  "author": "me",
  "license": "ISC",
  "devDependencies": {
    "npm-run-all": "^4.1.5"
  }
}

现在我想使用 npm-run-all 和 root 上的命令： npm run dev 启动后端和前端，结果是：

我还想与后端和前端共享公共包，在这种情况下这应该是可能的。也许其他人也面临着同样的问题，或者知道我在这里做错了什么。

Answer 1

[电子邮件受保护]添加了一种从子包/工作区调用脚本的方法，以下是一些基于您的原始版本的示例：

在

apps/backend

下的所有工作区中运行名为“dev”的脚本：

npm run dev -w apps/backend

在所有工作空间中运行名为“dev”的脚本：

npm run dev --ws

在名为

@projectx/frontend

的包中运行名为“dev”的脚本：

npm run dev -w @projectx/frontend

更多信息：

• 相关变更日志条目：https://github.com/npm/cli/releases/tag/v7.7.0
• 文档：https://docs.npmjs.com/cli/v7/commands/npm-run-script#workspaces-support
• 博客文章：https://dev.to/ruyadorno/npm-workspaces-npm-run-and-exec-1lg0

Answer 2

package.json 中的

"workspaces"

属性看起来正确。我正在使用 NPM Workspaces，它运行良好，但它仍然缺少很多功能，因此您需要自己进行连接。我也不认为

npm worksace

是一个命令（但也许是为了将来？），所以这里有一个让它工作的清单：

• 确保您使用的是 Node 15+ 和 NPM 7+
• 将所有package.json设置为

  "private": true,

• 删除项目中的所有

  package-lock.json

  ，转到根目录，然后

  npm install

  。它应该生成一个根级别

  package-lock.json

  ，其中包含工作空间的所有依赖项
• 由于您正在使用

  npm-run-all

  ，请将其添加到您的脚本中：

  "scripts": {
    "back:dev": "cd apps/backend && npm run dev",
    "front:dev": "cd apps/fontend && npm run dev",
    "dev": "npm-run-all build --parallel back:dev front:dev"
  }

然后用

npm run dev

开始。

注意，您可能需要考虑使用

start

脚本而不是

dev

来缩短需要键入的命令（例如

npm start

而不是

npm run dev

），但

npm run dev

仍然没问题。

Answer 3

在根目录中

package.json

您还可以为每个包添加短名称：

  "scripts": {
    "api": "npm --workspace=@app/api run",
  }

@app/api

是

package.json

中的名字

并从根目录运行

./packages/api

文件夹中的脚本，如下所示：

npm run api lint
npm run api dev

Answer 4

我想你希望：

• 将脚本和依赖项分开（因此有 4 个

  package.json

  文件），以便于维护

我可以建议一种没有工作空间的解决方法，可以满足您的需求：

{
  ...
  "scripts": {
    "//back:dev": "npm workspace @projectx/backend dev",
    "back:dev": "npm --prefix apps/backend dev",

    "//front:dev": "npm workspace @projectx/frontend dev",
    "front:dev": "npm --prefix apps/frontend dev",

    "dev": "run-p back:dev front:dev"
  },
  "//workspaces": [
    "apps/*"
  ],
  "devDependencies": {
    "@local/back": "file:apps/backend",
    "@local/front": "file:apps/frontend",
    "npm-run-all": "^4.1.5"
  }
}

npm --prefix

在当前文件夹之外的另一个文件夹中运行 npm 脚本。

@local/back

依赖项对此不是必需的，但我发现如果例如。一个包依赖于另一个包。你可以使用这个技巧来达到共同点：

  "dependencies": {
    "@local/common": "file:../common"
  }

一周前我希望工作区能够提供更好的解决方案，但没有发现比上述机制有任何好处。

我也喜欢工作空间：

仅在特定
• files

   的 

  package.json

   条目中公开这些文件（现在，全部显示）

仅允许
• import

   进入特定 

  exports

   的 

  package.json

   中的路径（如果有）

见

NPM Workspaces monorepo - 以 root 身份共享本地包的分发文件夹，而不是整个源文件

Answer 5

此方法利用 --prefix 标志来指定运行开发脚本的文件夹，并利用并发包同时执行多个 npm 脚本。为了清晰起见，-n 标志为每个任务分配名称，而 -c 标志添加颜色以在视觉上区分它们。

使用--前缀
1. 文件夹名称
同时使用

我不熟悉原始问题使用的包，但这是一个替代方案

 "scripts": {
    "back:dev": "npm run dev --prefix client",  // runs dev in ./cleint/packaga.json
    "front:dev": "npm run dev --prefix front",
    "dev": "concurrently \"npm run back:dev"\" \"npm run front:dev\""
  }

[0]

 是第一个命令，

[1]

 是第二个命令

我们可以将其替换为

--name

 或 

-n

 标志

"dev": "concurrently -n \"BE,FE\" \"npm run back:dev"\" \"npm run front:dev\""

我们甚至可以使用

--color

 和 

-c

 标志

添加颜色

"dev": "concurrently -n \"BE,FE\" -c \"green,blue\" \"npm run back:dev"\" \"npm run front:dev\""