Question

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

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

为了在其他应用程序中重新使用，我们决定将其从主应用程序中删除，给它自己的回购并将其作为公共节点模块发布，以便我们可以安装npm无论我们想要什么，我们就走了。

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

建议的修复是在开发过程中简单地用......之类的东西替换需求。

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

将其指向模块的本地版本，从而阻止了fix-publish-check-fix循环。

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

我已经看过Webpack文档了，看起来好像是resolve.alias是我正在寻找的东西，但不能把这些东西放在一起。此处的一些答案还建议定义一个自定义插件并定义您可以在代码中使用的环境变量......

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

我并不是真的热衷于乱扔乱哄app这样的if语句，所以希望有另一种选择吗？

由于

Answer 1

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

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

E.g。

<强> webpack.config.js

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

然后在源文件中使用带有require()的别名键/名称，这些文件由webpack编译。

<强> entry.js

var framework = require('framework123');

希望有所帮助！

使用Webpack有条件地解决模块

1 个答案: