Ответ 1
DefinePlugin - это прямая замена текста, аналогичная макросам в C. Webpack будет искать идентификатор и заменять его на заданную строку. Следующий пример иллюстрирует, как это работает.
Со следующей конфигурацией плагинов
new webpack.DefinePlugin({
VAR: 'myVar',
STRING: '"a string (note the quotes inside quotes)"',
FUNCTION: 'function myFun(arg) { console.log("myFun was called with", arg); }'
})
и JavaScript в качестве входных данных:
const myVar = 'hello';
console.log(VAR);
console.log(STRING);
console.log(FUNCTION);
// IIFE requires parens to execute
(FUNCTION)('iife');
// Better, only defines the function once
const functionToCall = FUNCTION;
functionToCall('another arg');
Выходной JavaScript будет:
const myVar = 'hello';
console.log(myVar);
console.log("a string (note the quotes inside quotes)");
console.log(function myFun(arg) { console.log("myFun was called with", arg); });
// IIFE requires parens to execute
(function myFun(arg) { console.log("myFun was called with", arg); })('iife');
// Better, only defines the function once
const functionToCall = function myFun(arg) { console.log("myFun was called with", arg); };
functionToCall('another arg');
Как вы можете видеть, они просто были заменены значениями, определенными в DefinePlugin. Если вы запустите его, вы получите следующий журнал консоли:
hello
a string (note the quotes inside quotes)
[Function: myFun]
myFun was called with iife
myFun was called with another arg
Для STRING вы обычно используете JSON.stringify(), который просто дает строковое представление строки (кавычки внутри кавычек). Если вы этого не сделаете, это будет просто идентификатор, и если идентификатор не был определен, он выдаст ошибку. FUNCTION также показывает, что он будет заменен повсюду, он не ссылается на одну и ту же функцию, потому что это прямая замена текста.
Если вы хотите опционально определить что-то, вам также необходимо проверить, существует ли переменная, потому что, если вы этого не сделаете, она выдает ошибку.
const varOrDefault = typeof VAR !== 'undefined' ? VAR : 'default';
Вы не можете сделать VAR === undefined, потому что предполагается, что переменная существует, и будет проверять, является ли она undefined, но когда она вообще не определена, она выдает ошибку, которая не определена VAR. После этого вы можете свободно использовать переменную и использовать ее так, как вы хотели, и проверить, является ли она функцией или нет (при проверке функции вы можете пропустить тест, был ли он определен, потому что в любом случае он будет использовать typeof).
Честно говоря, это не очень хорошее решение, тем более, что функция будет включена дважды из-за необходимой проверки typeof. И, честно говоря, такая замена текста не подходит для условно определенной динамической структуры. Было бы гораздо лучше переместить это в объект конфигурации. Очень просто принять объект конфигурации и указать значения по умолчанию. Существует несколько способов сделать это.
Например, Object.assign:
function mainFunction(options) {
const defaults = { /* default values */ };
options = Object.assign({}, defaults, options);
// Use the options later
}