我具有以下应用程序结构:
Application A
Application B
Common package
现在Application A
和B
在package.json
中添加了通用软件包:
{
dependencies: {
"commonPackage": "file:../../../commonPackage"
}
}
这两个应用程序都使用React以及通用软件包,都在React中添加了npm
,并且在我们开始使用react钩子之前就可以正常工作了。
因为我们从一开始就获得了Invalid Hook Call Warning,这是因为它拥有“多个React副本”,为避免这种情况,在通用包中,react依赖项已移至peerDependencies
是使用应用程序中的react实例而不是程序包中的。
当我们同时运行应用程序A
和B
时,它在浏览器中效果很好,但是当我在控制台中运行mocha
测试时,我得到了:
ERROR in ../commonPackage/~/@uifabric/utilities/lib/customizations/Customizer.js
Module not found: Error: Can't resolve 'react' in 'D:\myProject\commonPackage\node_modules\@uifabric\utilities\lib\customizations'
这来自我们使用的office-ui-fabric-react
程序包,但它似乎是一个更普遍的依赖关系解决问题。
项目在TypeScript中,我们使用webpack
来为浏览器编译应用程序,并使用tsc
来进行单元测试。
我找到了一些答案,建议在公共软件包中对npm link
进行反应,对应用程序node_modules
中的react软件包进行反应,但这似乎是错误的,因为公共软件包被两个应用程序使用,因此只能解决一个问题。
答案 0 :(得分:1)
在上述情况下,我们终于找到了一个解决方案
Common package
的devDependency反应esm
软件包来帮助我们的测试运行了解fabric
软件包随附的es6模块导出/导入。只需使用mocha --require esm ...
在webpack.config.js
的{{1}}中弹出别名并添加别名
Application
应用程序A,B和挂钩现在可以正常工作。