如何使用WebPack在NPM工作区中将编译模块从一个应用程序导入到另一个应用程序？

发布于 2025-01-27 04:53:13 字数 428 浏览 2 评论 0原文

我首次使用NPM工作区（节点版V16.15.0和NPM V8.5.5）。我需要在另一个带有一些次要更新的应用程序中从一个React应用程序中导入组件。我们仍然需要继续能够部署传统应用程序。因此，我正在使用MonorePo结构来实现这一目标。我可以单独启动并构建App1和App2。后来我打算将共享软件包从App2移出。但是现在，即使我在App1中导入组件时构建了App2，我也会遇到一个错误“您可能需要一个额外的加载程序来处理这些加载程序的结果”。我猜该导入仍然来自SRC，而我要导入编译文件。我该怎么做？

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

原文

I'm using npm workspaces for the first time(node version v16.15.0 and npm v8.5.5 ). I need to import components from a react app in another app with some minor updates. We still need to continue to be able to deploy the legacy app. So I'm using monorepo structure to achieve this. I can start and build the app1 and app2 individually. Later I'm planning to move shared packages out of app2. But for now even though I've build the app2 when I import components from it in app1 I get an error "You may need an additional loader to handle the result of these loaders". I guess the import is still from the src whereas I want to import compiled files. How can I do that ?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

允世 2025-02-03 04:53:13

所以我终于使一切正常。我分享了我想在App1中导入的App2的React组件。我本可以将共享组件移至单独的package/progage/features.js [x]。但是目前，我直接从App2导入它。为此，我需要在app1中更新我的webpack配置以解决

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

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

。 package.json下的app1中的依赖性。我在这里得到了这篇文章的提示。 -workSpaces-27012A100269＃4223“ rel =“ nofollow noreferrer”> https://medium.com/edgybees/edgybees/how-to-to-move-move-move-from-an-existing-from-an-existing-to-repository-to-repository-to-a-a-a-monorepo-- a-monorepo-in-monorepo-in-monorepo-using-inpm--- inpm------ inpm----------------- 7-workSpaces-27012A100269＃4223

通过这样做，我可以教WebPack来传输从App2导入的SRC文件。希望这可以帮助任何在NPM Workspace 8上寻找更多信息的人

So I finally got everything working. I had shared react components from app2 that I wanted to import in app1. I could have moved the shared components into separate package/features/Feature.js[x]. But for the time being I'm importing it directly from app2. For this I needed to update my webpack config in app1 to resolve for

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

NOTE: @scope/app2 is the package name in package.json

Additionally I added @scope/app2 as a dependency in app1 under package.json. I got the hint from this post here https://medium.com/edgybees-blog/how-to-move-from-an-existing-repository-to-a-monorepo-using-npm-7-workspaces-27012a100269#4223

By doing this I was able to teach webpack to transpile the src files imported from app2. Hope this helps anyone looking for more information on npm workspace 8

回复收藏 0 原文

~没有更多了~