问题标签 [npm-workspaces]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
228 浏览

node.js - NPM 工作区和 VSCode node_modules 路径

我正在使用带有打字稿的 npm 工作区,如此 git README https://github.com/Quramy/npm-ts-workspaces-example

当我npm i从项目根目录执行时,它会将所有包安装在根目录(node_modules)中。它不会node_modules在每个工作区中创建目录。因此,VSCode 认为 'module' is missing (Cannot find module 'abcde' or its corresponding type declarations),因此在导入行的行下显示红色并且不显示自动完成建议。

如何让 VSCode 了解包安装在根文件夹中并使用它来提供自动完成建议并删除包导入下的红色下划线。

0 投票
1 回答
189 浏览

typescript - VS Code 或 Chrome 开发工具:调试 NPM Workspaces (monorepo) TypeScript + React 代码

我有一个使用 NPM Workspaces 的 monorepo 设置。它看起来像这样:

  • 应用
    • 我的反应应用
    • 共享包

两者my-react-appshared-package用 TypeScript 重写。我的 React 应用程序在 localhost:3000 上启动。我可以同时使用 Chrome 开发工具和 VS Code 的调试器来中断主 React 应用程序(中的 ts 和 tsx 文件my-react-app)中的代码,但我无法让我的断点在shared-package.

Chrome 开发工具

我可以在 Chrome 开发工具中看到shared-package's TypeScript 文件(通过源映射),但那里的断点永远不会被击中。

VS 代码调试器

在 launch.json 中使用以下配置:

我可以得到断点,my-react-app但不能shared-package

如何使用 Chrome 开发工具或 VS Code 的调试器在 monorepo 包中获取断点?

0 投票
1 回答
228 浏览

npm - 列出类似于 lerna ls 的 NPM 工作区

我正在寻找一个类似于lerna ls打印所有工作区的 NPM 命令。

例如,假设我有一个子目录,并且我的 package.json 看起来像这样package1package2packages

我想获得 NPM 7 工作区的列表。对于我期望的示例:

  • 包/包1
  • 包/包2

我希望npm ls -p --depth 0能做到这一点,但不幸的是它也在打印出其他依赖项。

我想我可以使用npm ls -json并解析出顶级依赖项。但是,我希望有更好的方法?

0 投票
1 回答
78 浏览

node.js - 在 Azure CI/CD 管道中使用 npm 工作区来构建 React Web 应用程序?

我目前正在使用一个 React Web 应用程序(由我构建并且之前被搁置),将它带到现在,然后将可重用的部分折叠到我正在构建的新的 React Native 应用程序中。Web 应用程序现在package由工作区使用者控制,目前将通过 Azure 上的 CI/CD 部署。

为了管理我从当前仓库开始设计的monorepo,我想通过需要最小代码和依赖增量的最简单工具来做到这一点:npm工作区(npmv7 的新功能)——而不是更重的东西和少“库存”之类的lerna。但是,Azure 最新可用的 Node.js 版本似乎是 14,默认为npmv6 的最新次要/补丁版本。谁能向我确认,如果我在一个包中构建 Web 应用程序的构建序列,它们目前可以在 Azure 的 CI/CD 上工作吗?或者甚至只是给我更多的颜色?

0 投票
2 回答
328 浏览

npm - 如何从 npm 7 工作区 monorepo 中的所有包中删除所有 node_modules

如何node_modules从 npm 7 工作区中的所有包中删除所有文件夹?

使用 Lerna 我们可以执行lerna clean -y,但是当迁移到本机 NPM 7+ 工作空间时,是否有一些等价物?

0 投票
1 回答
130 浏览

eslint - 使用 npm 工作区的 Eslint 无外部依赖项错误

我已经使用具有以下高级结构的 NPM 工作区设置了我的 monorepo:

我所有的包都是私有的,并且在它们各自的package.json文件中都被标记为私有。

我已经成功地设置了一切,以便我可以在 Web 和移动工作区中编写这样的代码:

import { ITestInterface } from '@company/common';

使用我当前的设置,每当我打开任何从以下位置导入任何内容的文件时,我都会在 IDE(VS 代码)中收到 eslint 警告@company/common'@company/common' should be listed in the project's dependencies. Run 'npm i -S @company/common' to add it

如果可能的话,我宁愿不完全禁用此警告。有没有办法配置 eslint 让它理解 monorepos,这样当我尝试从我的 monorepo 中的包(工作区)导入某些东西时它不会给我警告?

0 投票
1 回答
270 浏览

npm - NPM 8 工作区 - 安装一个包作为 monorepo 中另一个包的依赖项

说我有以下结构

假设我想安装 packageA 作为 packageB 的依赖项。对于 NPM 8 工作区,我认为应该这样做: npm install @my-scope/packageA --workspace=@my-scope/packageB

相反,我得到了这个:

显然它正试图从注册表中获取它(不,我还没有发布,还没有准备好),但我希望它认识到这个依赖项作为工作空间存在于我的项目中。有谁知道为什么会发生这种情况?我还没有找到很多很好的资源来解释如何从你的 monorepo 中安装依赖项(我什至不知道那些叫什么......)。

0 投票
0 回答
939 浏览

reactjs - 如何将 Turborepo 用于使用 Create React App 创建的现有 React 应用程序以使其成为 monorepo?

我有一个用创建反应应用程序制作的有趣项目。我想将同一个应用程序转换为浏览器扩展。这个想法迫使我把这个项目变成一个单一的回购。因为在这两个应用程序中,我将使用相同的组件、挂钩、提供程序等。

我不想使用 Lerna 或 Yarn 工作区。而且,这将是我的第一个 monorepo。我想开始使用 Turborepo。但是,我无法想象如何让它以一种好的方式工作。

我的目标文件夹结构存在于下面

  • 应用/
    • 应用程序1/
    • 应用程序2/
  • 包/
    • 成分/
    • 挂钩/
    • 提供者/
    • 款式/
  • 包.json
  • 包-lock.json

我会将包文件夹中的 monorepo 依赖项导入到应用程序文件夹中的应用程序中。

例如;

如果您有除 Turborepo 之外的其他解决方案,请随时告诉我。NPM 工作区也是一个可接受的解决方案。但是,由于性能更好,turborepo 具有优先权。

提前感谢您的时间和回答

0 投票
0 回答
147 浏览

npm - 使用 npm 工作区时如何为单个包安装依赖项?

使用npm 工作区,我有一个像这样的文件夹结构

通常,在为 nodejs 应用程序创建生产构建时,我会运行npm ci --only=production然后复制node_modules到构建工件中。我不确定在使用工作区时如何做类似的事情。

如果我运行npm ci --only=production --workspace server它,它会将依赖项拆分为./node_modules./server/node_modules。也许我应该将两者都复制(合并?)node_modules到构建工件中?

另一种选择可能是复制./package-lock.json./server/package.json进入一个新目录并运行npm ci --only=production. 它似乎确实有效,但我对 npm 了解不足,无法知道这是否是个好主意。

要求是:

  1. node_modules应该只包括所选包的生产依赖项
  2. 依赖版本应该由package-lock.json.
0 投票
1 回答
188 浏览

typescript - Vue 3 mono repo 代码库中的 TypeScript 错误

我最近使用 Vue 3 (CLI/Webpack) + PrimeVue 将代码库更新为使用 npm 工作区的 monorepo,并且由于 PrimeVue 组件出现 TS 错误,如下所示:

我的回购具有以下结构:

我的 tsconfig.json:

我的 tsconfig.base.json:

我的根包.json:

作为一个例子 InputText.d.ts (错误的组件之一):

我不知道哪个依赖似乎被打破了,也不知道如何让 TS 再次快乐。

任何帮助,将不胜感激。

谢谢,