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

Question

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

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-运行-all 和 root 上的命令启动后端和前端：npm 运行 dev 结果是：

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

Answer 1

您在 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 2

我想你希望：

将脚本和依赖项分开（因此 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"
  }

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

我也喜欢工作空间：

仅在特定 package.json 的 files 条目中公开那些文件（现在，全部显示）
只允许 import 到特定 package.json 的 exports 中的路径，如果它有一个

见

Answer 3

npm@7.7.0 添加了一种从子 packages/workspaces 调用脚本的方法，以下是一些基于您的原始示例的示例：

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

npm run dev -w apps/backend

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

npm run dev --ws

运行在名为 @projectx/frontend:

的包中名为“dev”的脚本

npm run dev -w @projectx/frontend

更多信息：

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

Answer 4

在根目录下package.json你还可以为每个包添加简称：

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

@app/api 是 package.json

中的一个名字

和运行根目录中 ./packages/api 文件夹中的脚本，如下所示：

npm run api lint
npm run api dev

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

Npm workspaces - call workspace script from root package

workspace

node.js

npm

monorepo