[英]How to import a compiled module from one app to another in npm workspace using webpack?
I'm using npm workspaces for the first time(node version v16.15.0 and npm v8.5.5 ).我第一次使用 npm 工作区(节点版本 v16.15.0 和 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.
所以我使用 monorepo 结构来实现这一点。 I can start and build the app1 and app2 individually.
我可以单独启动和构建 app1 和 app2。 Later I'm planning to move shared packages out of app2.
稍后我打算将共享包移出 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".
但是现在,即使我在 app1 中从它导入组件时构建了 app2,我也会收到错误消息“您可能需要额外的加载器来处理这些加载器的结果”。 I guess the import is still from the src whereas I want to import compiled files.
我想导入仍然来自 src,而我想导入已编译的文件。 How can I do that ?
我怎样才能做到这一点 ?
- root
package.json
- apps
- app1
package.json
webpack.config.json
- app2
package.json
webpack.config.json
So I finally got everything working.所以我终于让一切正常了。 I had shared react components from app2 that I wanted to import in app1.
我从 app2 共享了我想在 app1 中导入的反应组件。 I could have moved the shared components into separate
package/features/Feature.js[x]
.我本可以将共享组件移动到单独的
package/features/Feature.js[x]
中。 But for the time being I'm importing it directly from app2.但目前我是直接从 app2 导入的。 For this I needed to update my webpack config in app1 to resolve for
为此,我需要在 app1 中更新我的 webpack 配置以解决
resolve: {
alias: {
'@scope/app2/src': path.resolve(__dirname, '../app2/src'),
},
},
NOTE: @scope/app2
is the package name in package.json注意:
@scope/app2
是 package.json 中的包名
Additionally I added @scope/app2
as a dependency in app1 under package.json.此外,我在 package.json 下的 app1 中添加了
@scope/app2
作为依赖项。 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我从这篇文章中得到了提示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.通过这样做,我能够教 webpack 转换从 app2 导入的 src 文件。 Hope this helps anyone looking for more information on npm workspace 8
希望这可以帮助任何寻找有关 npm 工作区 8 的更多信息的人
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.