Почему 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

Это кажется очень необычным, ненужным и "dev-error-prone".

Это проблемы с проверкой типов?

ОТВЕТЫ

Ответ 1

Ответ ниже примера:

  • Если значение представляет собой строку, оно будет использоваться как фрагмент кода.
  • Если значение не является строкой, оно будет сжато (включая функции).

т.е. значение строки вставляется в исходный код дословно.

Передача JSON.stringify(true) или передача true напрямую совпадают, так как нестроковые значения преобразуются в строки.

Однако существует большая разница между JSON.stringify('5fa3b9') и "5fa3b9":

Предполагая, что ваш код был

if (version === VERSION)

то VERSION: JSON.stringify('5fa3b9') приведет к

if (version === "5fa3b9")

но VERSION: "5fa3b9" приведет к

if (version === 5fa3b9)

который является недопустимым кодом.

Обратите внимание, что поскольку плагин выполняет прямую замену текста, значение, данное ему, должно содержать фактические кавы внутри самой строки. Как правило, это делается либо с помощью альтернативных котировок, например, "производство", либо с использованием JSON.stringify( "production" ).