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

【问题标题】：Why does Webpack's DefinePlugin require us to wrap everything in JSON.stringify?为什么 Webpack 的 DefinePlugin 要求我们将所有内容都包装在 JSON.stringify 中？
【发布时间】：2016-09-19 03:09:42
【问题描述】：

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

这似乎非常不寻常、不必要且“容易出错”。

是类型检查问题吗？

【问题讨论】：

标签： javascript webpack

【解决方案1】：

答案在示例下方：

如果值是字符串，它将被用作代码片段。

如果值不是字符串，它将被字符串化（包括函数）。

即将字符串的值插入到源代码中逐字。

传递JSON.stringify(true)或直接传递true是一样的，因为非字符串值被转换为字符串。

不过JSON.stringify('5fa3b9')和"5fa3b9"还是有很大区别的：

假设你的代码是

if (version === VERSION)

那么VERSION: JSON.stringify('5fa3b9') 将导致

if (version === "5fa3b9")

但VERSION: "5fa3b9" 会导致

if (version === 5fa3b9)

这是无效代码。

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

【讨论】：