Как удалить console.log (или пользовательские функции отладки) из производственных сборок с помощью Webpack

Производственные сборки Console.log

И таким образом Джимми потерял работу младшего веб-разработчика в случайной компании. Я знаю многих людей (включая меня), которые любят писать глупые вещи в функциях отладки, в то время как они работают только для того, чтобы запомнить, что делает строка, так как в некоторых случаях следующие строки легко запомнить и написать, что "Left side drawer component > disableOption > Checkbox test":

console.log("bananas");
console.log("**** the police");
console.log("virgin until last night");
console.log("Piña colada");
console.log(`Am I pretty or ugly?
Boyfriend: You're both.
Girlfriend: What do you mean?
Boyfriend: You're pretty ugly.`);

Ну, не достаточно, чтобы написать целую шутку … но что-то в этом роде, надеюсь, вы понимаете.

В этой статье вы узнаете, как удалить функцию console.log (или любую пользовательскую функцию отладки) из производственной сборки веб-пакета.

1. Установите модуль webpack-strip

Webpack-strip — это простой загрузчик Webpack, который удаляет пользовательские функции из вашего кода. Это может быть очень полезно, если вы хотите использовать операторы отладки при разработке приложения, но не хотите, чтобы эта информация отображалась в вашем производственном коде (просто идеально, чтобы удалять глупые вещи из производства).

Чтобы установить этот модуль в свой проект, выполните в терминале следующую команду:

npm install --save-dev strip-loader

Для получения дополнительной информации об этом модуле, пожалуйста, посетите официальный репозиторий Github здесь. Этот модуль был написан ребятами из Yahoo.

2. Использование модуля

Предположим, вам нужен собственный метод с именем debug, который вы не хотите показывать в своих производственных сборках:

Заметка

Если ваш пользовательский метод требуется как модуль из другого файла, тогда обязательно проверьте шаг 3. Если вам нужно только удалить console.log и связанные с ним методы консоли, просто выполните этот шаг, и вы готовы к работе.

var debug = require('debug');
var myAwesomeApplication = function () {
// The following 3 lines will be stripped with the webpack loader
debug('makeFoo called');
debug('makeFoo args', arguments);
console.log("Bananas");
// This code would remain as it doesn't use the debug function
return 'Foo';
};

Как видите, debug метод и console.log покажет что-то в консоли. Чтобы удалить их из нашего проекта (не исходный код, а производственные сборки), мы просто добавили бы загрузчик webpack-strip. Начните с открытия вашего webpack-production.config.js файл и добавьте загрузчик так, как вы хотите:

Использование strip-loader в качестве библиотеки

Это предпочтительный метод, так как его довольно легко прочитать, вы можете предоставить множество аргументов функциям загрузчика, например console.info, console.warn, console.dir и т.п.

const WebpackStrip = require('strip-loader');
const config = {
...
module: {
loaders: [
// ... Start loader
{
test: /\.js$/,
loader: WebpackStrip.loader('debug', 'console.log')
}
// ... End loader
]
}
...
};

3. Замена модуля

Обратите внимание, что если плагин заменит вашу пользовательскую функцию, он все равно будет необходим в окончательном комплекте. Это означает, что вам все еще нужно иметь функцию отладки, однако это должна быть просто пустая функция. Вы можете достичь этого, используя NormalModuleReplacementPlugin из WebPack.

Создайте пустой файл, который будет содержать пустую функцию:

// emptyDebug.js
module.exports = function() { return new Function(); };

А затем в конфигурации вашего веб-пакета укажите, что модуль отладки — это просто пустая функция:

{
plugins: [
new webpack.NormalModuleReplacementPlugin(/debug/, process.cwd() + '/emptyDebug.js'),
]
}
Ссылка на основную публикацию
Adblock
detector