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

Question

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

这似乎非常不寻常,不必要和"容易出错".

是类型检查问题吗？

Answer 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')来完成.