webpack - 定义插件方法

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/

谷歌搜索出现零。我的下一步是传递一个字符串值，然后使用它react-json-schema来获取组件。这似乎太复杂了，所以我希望有一种方法可以在DefinePlugin.

编辑 为了澄清起见，我正在做的是构建一个可以注册到私有 npm 注册表的通用 redux 模块。调用时，可以为该模块提供 API url 和响应翻译器的覆盖。这可以防止我每次为不同的供应商进行安装时分支代码或创建 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无论如何都会使用 a ）。

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

例如Object.assign：

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

  // Use the options later
}