为什么Webpack的DefinePlugin要求我们将所有内容都包装在JSON.stringify中？

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
})

https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin

这看起来非常不寻常、不必要并且“容易出现开发错误”。

是类型检查问题吗？

答案如下：

• 如果该值是字符串，它将用作代码片段。
• 如果该值不是字符串，它将被字符串化（包括函数）。

IE。字符串的值被插入到源代码中verbatim.

Passing JSON.stringify(true)或路过true直接是相同的，因为非字符串值被转换为字符串。

然而，两者之间存在很大差异JSON.stringify('5fa3b9') and "5fa3b9":

假设你的代码是

if (version === VERSION)

then VERSION: JSON.stringify('5fa3b9')会导致

if (version === "5fa3b9")

but VERSION: "5fa3b9"会导致

if (version === 5fa3b9)

这是无效的代码。

请注意，由于该插件执行直接文本替换，因此赋予它的值必须包含字符串本身内部的实际引号。通常，这可以使用备用引号（例如““生产””）或使用 JSON.stringify('生产') 来完成。