Webpack尝试引用一个可能缺失的模块。

Question

我想尝试在Webpack构建中使用require引入一个模块，如果找不到该文件，则什么也不做，不抛出错误等。 我尝试过以下方法：

try {
  const local = require('./config-local.js');
  extend(config, local);
} catch (err) {
  // do nothing here
}

基本上我想做的是，如果找到一个本地配置文件，则使用它来扩展配置对象，但是如果没有找到，就不要扩展任何内容。

尽管 require 的语句被包装在 try/catch 子句中，Webpack 仍然会抛出一个缺少模块的错误。

如何告诉 webpack 忽略它？

- kamilkp

---

这是在 Node.js 或客户端代码中？ - Vishwanath

因为我想要将这个文件加入到Git的忽略列表中，所以出现了问题 :/ - kamilkp

所以每个开发者都必须在自己的工作区中添加它。我在我的项目中是这样做的，我有一个grunt任务，在webpack之前运行，负责创建配置文件（这些文件从某个远程配置管理服务器下载）。 - Vishwanath

你有没有找到这个问题的答案？我在考虑监听一个事件可能会起作用，但我不确定是哪一个，而且这似乎有点过度。 - trysis

我通过在 post-install（从 npm install）上创建一个虚拟的 config-local.js 来解决了这个问题，如果不存在的话。虽然不是真正的解决方案，但在我的情况下起作用。 - kamilkp

Answer 1

Webpack试图将每个require打包到输出文件中。它进行静态分析，找到一个require并尝试读取它。你的try&catch只能在运行时起作用。

你需要做的就是将这个require“标记”为特殊的。

你可以使用webpack的特殊require：__ webpack_require__来实现，它不会在构建时解析，并且将成为包中的常规require。

try {
  const local = __webpack_require__('./config-local.js');
  extend(config, local);
} catch (err) {
  // do nothing here
}

- felixmosh

Answer 2

根据@trysis的评论，我在我的项目中最终做出了以下更改：

const REQUIRE_TERMINATOR = '';
try {
  const local = require(`./config-local.js${REQUIRE_TERMINATOR}`);
  extend(config, local);
} catch (err) {
  // do nothing here
}

这将为WebPack提供足够的信息，以包含所有以config-local.js开头的文件（这正是您想要的文件），但也会让它混淆得不会在运行前尝试验证文件的存在性，因此您的try/catch块将在运行时触发。

- panta82

Answer 3

我认为稍微不同的方法可能会给你想要的结果。你提到了所讨论的文件是应用程序配置; 我会在webpack.config.js中处理它，而不是在应用程序代码中处理它。在那里，你的require将遵循普通的nodeJS规则，而不是webpack的静态分析。你可以尝试捕获require语句并使用应用程序将使用的结果配置注入到应用程序中，然后使用DefinePlugin将该配置注入到应用程序中。在我的看法中，像这样使用DefinePlugin（使用静态文件或env变量中的数据）来注入配置是向webpack构建的应用程序注入配置的更常见的模式。

// load config data
const defaultConfig = require("default-config.json");
let localConfig = {};
try {
  localConfig = require("config-that-may-not-exist.json");
} catch (err) {}

const actualConfig = Object.assign(defaultConfig, localConfig);

// ...later, in plugins part of config:
plugins: [
  new webpack.DefinePlugin(actualConfig)
]

- Brendan Gannon