webpack-DefinePlugin方法

在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传递方法的地方

谷歌搜索结果为零。我的下一步是传递一个字符串值，然后使用

react json schema

拾取组件。这似乎太复杂了，所以我希望有一种方法可以在

DefinePlugin

中定义方法

编辑 为了澄清，我正在做的是构建一个通用的redux模块，它可以注册到一个私有的npm注册中心。调用此模块时，可以为API URL和响应转换器提供覆盖。这防止了我每次为不同的供应商安装时，都会分支代码或创建99%相似的模块

如果通过环境变量提供函数是不合适的，那么允许这种重写的替代方法是什么？我不确定在通过存储区分派内容时是否会播放config对象。我正在使用的另一个选项是覆盖模块中的整个文件。我对Ruby中使用import_path的方法很熟悉，但在研究中，我没有看到任何等效的JS/npm方法。

根据

DefinePlugin允许您创建全局常量，可以 在编译时配置。这对于允许不同的 开发构建和发布构建之间的行为

这些定义是键-值对，在下面的代码语法行中，应遵循key:value

Key : Value

 LIST_FETCH_TX(data) { return { ...data, test: 'HELLO!' }; }

我仍然不确定它是否适用于函数，因为它的目的是创建全局常量。不过，未来可能会发生变化，新事物不断涌现：-）

不确定这个答案，但可能会帮助您找出它抛出错误的原因：丢失

---

干杯

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（）

，它只提供字符串的字符串表示形式（引号内加引号）。如果不这样做，它将只是一个标识符，如果没有定义标识符，它将抛出一个错误。

函数

还显示它将在任何地方被替换，它没有引用同一个函数，因为它是一个直接的文本替换

---

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

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

您不能执行

VAR===undefined

，因为这假设变量存在，并且只会检查它是否未定义，但如果它根本没有定义，它将抛出一个未定义的错误

VAR

。之后，您可以自由地使用变量，并根据需要使用它，并检查它是否是函数（在检查函数时，您可以跳过测试它是否已定义，因为这将使用

typeof

）

老实说，这不是一个很好的解决方案，特别是因为一个函数将包含两次，因为需要

typeof

check。公平地说，这种文本替换不适合任何有条件定义的动态结构。最好将其移动到配置对象。接受配置对象并提供默认值非常简单。有几种方法可以实现这一点

例如：

---

我没有学你的榜样。我在跟踪键/值，对吗？我试过ES5

LIST\u FETCH\u TX:function（data）{…}

和constants

const fetchTX=（data）=>{…}

和

LIST_FETCH_TX:fetchTX

。我在第二行“LIST_FETCH_TX（data）{return{……data，test:'HELLO！'}中看到冒号丢失

resolve.alias

在这种情况下可能更适合您。我现在拥有的是通用redux模块将查找的默认“translators”模块的别名。不过，我不知道如何将其传递给redux模块。我可以让中间件将选项作为参数，但它无法在不改变父组件或容器的情况下按环境设置它们。

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

  // Use the options later
}