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

Question

使用 NPM Workspaces，我与其他人（webapp1 和 webapp2）共享一个包 (components)。像这样：

root
  apps   
    webapp1
    webapp2
  packages
    components

一切正常，但 components 中的所有内容，包括 src 文件夹中的源代码正在共享。由于 components' 编译输出文件夹是 dist，我只想共享该文件夹。这是它在根 node_modules:

中的样子

问题是当我需要在 webapp1 或 webapp2 中导入时，我的导入路径必须包含 dist 文件夹。这是我从 VS Code 获得的智能感知：

这就是我在 webapp1 和 webapp2 中导入的方式：

import Center from '@mycompany/components/dist/Center'

虽然一切正常，但我如何设置我的 NPM 工作区，以便只有 dist 文件夹的内容在其根目录中共享？

我已经尝试在 components 文件夹中使用 NPM 的 files 和 .npmignore 来忽略除 dist 文件夹之外的所有内容，但这似乎不起作用. package.json for components 中的 main 属性也设置为指向 dist/index.js:

"main": "dist/index.js"

有趣的是，如果我想导入 dist/index.js 文件，我可以不使用 dist:

import foo from '@mycompany/components'

...但是，导入 dist/index.js 以外的任何内容都需要 dist 包含在路径中。

Answer 1

在您的用例中，您应该将 packages 文件夹视为 dist 文件夹的集合。

在这种情况下，您可以将 packages/components/src 文件夹移动到项目的其他位置，然后构建到 packages/components 而不是 packages/components/dist

root
  apps   
    webapp1
    webapp2
  packages
    components
  src
    components

我在这个 tooling monorepo 我创建的

中有一个类似的设置

Answer 2

@nicksaroba 方法的替代方法，如果您不想重组项目布局，您可以设置一个别名：

// apps/webapp/webpack.config.js

module.exports = {
    // ...
    resolve: {
        alias: {
            "components": "@mycompany/components/dist/"
        }
    },
    // ...
};

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

NPM Workspaces monorepo - share local package's distribution folder as root instead of the entire source files

npm

monorepo

npm-workspaces