webpack - DefinePlugin 方法

Question

在 webpack 插件的定义中，我试图提供一个覆盖函数，如果该方法存在，我的模块将获取该函数。

export const listFetchAPI = () => {
  return ( LIST_FETCH_API ? LIST_FETCH_API : '/list/');
};
export const listFetchTX = (data) => {
  return ( LIST_FETCH_TX === 'function' ? LIST_FETCH_TX(data) : data );
};

在我的 webpack 配置中，基于项目的环境或实现，我可能想要也可能不想为这些功能提供覆盖。

webpackConfig.plugins.push(
  new webpack.DefinePlugin({
    LIST_FETCH_API: JSON.stringify('https://testapi.com/listFetch/')
    LIST_FETCH_TX(data) { return { ...data, test: 'HELLO!' }; }
  })
);  

我尝试过使用 ES5 和 ES6 表示法。构建时，出现错误 SyntaxError: Unexpected identifier

我没有在文档中看到可以通过 DefinePlugin 传递方法的地方。 https://webpack.js.org/plugins/define-plugin/

Google 搜索结果无效。我的下一步是传递一个字符串值，然后使用 react-json-schema 来获取组件。这似乎太复杂了，所以我希望有一种方法可以在 DefinePlugin 中定义方法。

编辑为了澄清起见，我正在做的是构建一个可以注册到私有(private) npm 注册表的通用 redux 模块。调用时，可以为该模块提供 API URL 和响应转换器的覆盖。这可以防止我每次为不同的 vendor 进行安装时分支代码或创建 99% 相似的模块。

如果通过环境变量提供函数不合适，那么允许此类覆盖的替代方法是什么？我不确定在通过商店发送东西时配置对象是否会发挥作用。我正在尝试的另一个选项是覆盖模块中的整个文件。我熟悉 Ruby 中使用 import_path 的方法，但在研究中，我还没有看到任何等效的 JS/npm 方法。

Answer 1

DefinePlugin 是直接文本替换，类似于 C 中的宏。Webpack 将查找标识符并将其替换为给定的字符串。以下示例说明了其工作原理。

使用以下插件配置

new webpack.DefinePlugin({
  VAR: 'myVar',
  STRING: '"a string (note the quotes inside quotes)"',
  FUNCTION: 'function myFun(arg) { console.log("myFun was called with", arg); }'
})

和 JavaScript 作为输入:

const myVar = 'hello';

console.log(VAR);
console.log(STRING);
console.log(FUNCTION);
// IIFE requires parens to execute
(FUNCTION)('iife');

// Better, only defines the function once
const functionToCall = FUNCTION;
functionToCall('another arg');

输出的 JavaScript 将是:

const myVar = 'hello';

console.log(myVar);
console.log("a string (note the quotes inside quotes)");
console.log(function myFun(arg) { console.log("myFun was called with", arg); });
// IIFE requires parens to execute
(function myFun(arg) { console.log("myFun was called with", arg); })('iife');

// Better, only defines the function once
const functionToCall = function myFun(arg) { console.log("myFun was called with", arg); };
functionToCall('another arg');

如您所见，它们只是被 DefinePlugin 中定义的值替换了。如果您运行它，您将获得以下控制台日志:

hello
a string (note the quotes inside quotes)
[Function: myFun]
myFun was called with iife
myFun was called with another arg

对于 STRING，您通常会使用 JSON.stringify()，它只为您提供字符串的字符串表示形式(引号内引号)。如果你不这样做，它将只是一个标识符，如果没有定义标识符，它将抛出一个错误。 FUNCTION 还表明它将在任何地方被替换，它没有引用相同的函数，因为它是直接文本替换。

---

如果你想有选择地定义一些东西，你还需要检查变量是否存在，因为如果你不存在，它会抛出一个错误。

const varOrDefault = typeof VAR !== 'undefined' ?  VAR : 'default'; 

你不能做 VAR === undefined 因为它假设变量存在并且只会检查它是否未定义，但是当它根本没有定义时，它会抛出一个错误 VAR 未定义。之后，您可以随意使用该变量并根据需要使用它，并检查它是否是一个函数(当检查一个函数时，您可以跳过它是否已被定义的测试，因为那将使用 typeof 无论如何)。

老实说，这不是一个很好的解决方案，特别是因为需要 typeof 检查，一个函数将被包含两次。公平地说，这种文本替换不适用于任何有条件定义的动态结构。将其移至配置对象会是一个更好的主意。接受配置对象并提供默认值非常简单。有几种方法可以实现这一点。

例如 Object.assign :

function mainFunction(options) {
  const defaults = { /* default values */ };
  options = Object.assign({}, defaults, options);

  // Use the options later
}