如何自定义基于webpack的应用程序或库？

Question

我希望我没有破坏任何“最佳实践”工程的东西这个问题，如果是的话，我会感激的原因... 所以这里是一个答案：

我有一个JavaScript应用，projectA，这是使用webpack与下面的输出配置收拾了react应用：

output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'dist/[name].js', 
    libraryTarget: 'umd' 
}, 

现在，我希望能够再建一个应用程序或模块，让我们把它projectB，它调用和使用模块的projectA。

挑战和问题是：我如何定制从projectA获得的模块，以在projectB上使用它们时采取不同的行为？

例如：

1. 我从projectA中，我想更改按钮的处理程序的屏幕。
2. 从projectA的屏幕我想添加更多的组件绘制。
3. 我想用我自己的模块属于projectB

假设以取代projectA整个模块：

• 两个项目都是react基于应用程序
• 两个项目的使用webpack
• 包装我可以完全访问这两个项目的源代码

此线程可能是一个讨论，不正是有一个唯一正确的答案

Answer 1

关于第一点，你不能只是替换正在使用一个模块在处理程序中，当您导入外部模块，你不该”不要意识到它的内在结构和行为。如果你想要这种行为，你可以随时将ProjectA中按钮的处理程序作为道具给予。

您希望获得的第二点还将授予您对内部行为（即渲染）的访问权限。与其寻求在ProjectB中添加到ProjectA中此组件的可能性，解决它的唯一方法是我可以想到的是使用子组件并将它们直接渲染为您希望添加到的ProjectA类的一部分。或者使用子项并公开一些由ProjectA用户使用的包装器。

第三点也是不可重复的，如果在ProjectA中它的逻辑是从外部给予你想要的模块作为道具，那就这样做。否则，分解ProjectA上的组件并使用ProjectA中的一些类和ProjectB中的一些类在ProjectB中构建它。