如何使用 webpack 将已编译模块从一个应用程序导入到 npm 工作区中的另一个应用程序？

Question

我第一次使用 npm 工作区（节点版本 v16.15.0 和 npm v8.5.5 ）。 我需要从另一个应用程序中的反应应用程序导入组件，并进行一些小更新。 我们仍然需要继续能够部署旧版应用程序。 所以我使用 monorepo 结构来实现这一点。 我可以单独启动和构建 app1 和 app2。 稍后我打算将共享包移出 app2。 但是现在，即使我在 app1 中从它导入组件时构建了 app2，我也会收到错误消息“您可能需要额外的加载器来处理这些加载器的结果”。 我想导入仍然来自 src，而我想导入已编译的文件。 我怎样才能做到这一点 ？

- root
  package.json
  - apps
    - app1
      package.json
      webpack.config.json
    - app2
      package.json
      webpack.config.json

Answer 1

所以我终于让一切正常了。 我从 app2 共享了我想在 app1 中导入的反应组件。 我本可以将共享组件移动到单独的package/features/Feature.js[x]中。 但目前我是直接从 app2 导入的。 为此，我需要在 app1 中更新我的 webpack 配置以解决

  resolve: {
            alias: {
                '@scope/app2/src': path.resolve(__dirname, '../app2/src'),
            },
        },

注意： @scope/app2是 package.json 中的包名

此外，我在 package.json 下的 app1 中添加了@scope/app2作为依赖项。 我从这篇文章中得到了提示https://medium.com/edgybees-blog/how-to-move-from-an-existing-repository-to-a-monorepo-using-npm-7-workspaces-27012a100269# 4223

通过这样做，我能够教 webpack 转换从 app2 导入的 src 文件。 希望这可以帮助任何寻找有关 npm 工作区 8 的更多信息的人