使用 Webpack 有条件地解析模块

Question

目前正在开发一个 ReactJs 项目，该项目依赖于 Bootstrap 风格的 UI 框架，该框架也是我们编写的。该框架最初是与主应用程序一起开发的，并且像任何其他模块一样被解决了..

require('./path/to/framework/');

为了在其他应用程序中的可重用性，我们决定将它从主应用程序中拉出来，给它自己的 repo 并将其发布为 public 节点模块，这样我们就可以npm 在我们想要的任何地方安装它，然后我们就走。

当需要对框架进行更改、添加或修复时出现问题。现在涉及发布模块更新，在您正在开发的任何应用程序中更新到模块的最新版本，检查，然后很可能返回，修复并再次重复该过程！不理想！

提议的修复是在开发期间简单地用诸如...之类的东西替换要求

require('absolute-path-to-framework');

将其指向模块的本地版本，从而防止修复-发布-检查-修复循环。

这个问题是有很多对框架的引用分散在整个应用程序中，因此可以理解的是，Webpack 正在解析和捆绑 node_modules 中的框架和 'local' 中的框架绝对路径指向，显然会导致重复定义等问题。

我查看了 Webpack 文档，似乎 resolve.alias 正是我正在寻找的东西，但无法将各个部分组合在一起。此外，这里的一些答案建议定义一个自定义插件并定义您可以在代码中使用的环境变量...

if(ENV.Dev){ 
   require('absolute-path-to-framework');
} else {
   require('framework');
}

我不太喜欢在应用程序中乱扔这样的 if 语句，所以希望有替代方案？？

谢谢

Answer 1

我认为你非常接近，你可以结合你提到的几个想法来提出一个有效的解决方案。

如果您在 webpack 配置中使用解析别名，您可以在设置别名的值时对特定节点环境变量（例如 NODE_ENV=development）进行一次性检查。

例如

webpack.config.js

{
  ...lots of other webpack config here...
  ...
  resolve: {
    ...
    alias: {
      framework123: ( process.env.NODE_ENV === 'development' ) ? 'absolute-path-to-framework' : 'framework-module-name'
    }
    ...
  }
  ...
}

然后在由 webpack 编译的源文件中使用别名 key/name 和 require()。

entry.js

var framework = require('framework123');

希望对您有所帮助！

使用 Webpack 有条件地解析模块

Conditionally Resolving Module with Webpack

webpack