Блог

Главная - Вопросы по программированию - в чем именно заключается функция webpack DefinePlugin?

в чем именно заключается функция webpack DefinePlugin?

#webpack

#webpack

Вопрос:

Прочитав документы webpack config docs, я наткнулся на кое-что, что я не могу полностью понять.

Насколько я знаю, мы можем определить глобальную константу, DefinePlugin как показано ниже, во время компиляции (сборки).

 new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1 1'
});

Как мы можем видеть выше, для ключей не требуется никаких кавычек.

Но мы должны использовать кавычки для включения или отключения флагов функций, как показано ниже.

 new webpack.DefinePlugin({
  'NICE_FEATURE': JSON.stringify(true),
  'EXPERIMENTAL_FEATURE': JSON.stringify(false)
});

Я мог бы догадаться, похожи ли эти флаги функций на зарезервированные ключевые слова.

Но я не могу найти список флагов функций, предоставляемых webpack по умолчанию.

Так что же это за флаги функций? Почему мы должны использовать эти кавычки вокруг ключей при включении / отключении флагов функций?

Заранее спасибо.

Ответ №1:

DefinePlugin это плагин, который заменяет переменные внутри вашего пакета настроенными значениями.

Он принимает обычный POJO (обычный старый объект JavaScript), это означает, что все правила, которые применяются к POJO, должны применяться к объекту конфигурации.

На самом деле,

 new webpack.DefinePlugin({
  NICE_FEATURE: JSON.stringify(true),
  EXPERIMENTAL_FEATURE: JSON.stringify(false)
});

также является допустимой конфигурацией объекта.

Если имя вашей переменной будет содержать какой-либо недопустимый символ для ключа объекта, вы должны заключить его в кавычки.

Например, обычно используется DefinePluin для замены process.env.NODE_ENV на его значение. Поскольку . символ не является допустимым символом для ключа объекта в JS, его следует заключить в кавычки.

 new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(true),
// --------------------^
});

«Запутанная» часть DefinePlugin заключается в том, что для нее требуется допустимая строка в качестве значения, поскольку она заменяет переменные в стороне от пакета.

Учтите, что ваше значение заключено в кавычки (скажем, company name with " ), поэтому для достижения этого значения должна быть допустимая строка "company name with "" , обычно используемая ppl JSON.stringify , которая экранирует любые символы, связанные с json, одним из которых является " char .

Надеюсь, это поможет :]