предисловие
Говоря оconsole.logОтладка, разумеется, очень проста в использовании, она помогла нам решить многое во время разработки.Bug. мы можем частосреда разработкия видел этот комокconsoleотладка. Но производственная среда никогда не должна появлятьсяconsoleинформационный код. Вы все еще вручную удаляете один за другим, как это утомительно!
Давайте рассмотрим эти способы очисткиПроизводственная средаconsoleБесполезный код.
Основная операция
Конфигурация веб-пакета
uglifyjs-webpack-plugin
Мы можем взглянуть на введение этого плагина, который используется для сокращения нашего кода.jsразмер кода. И если вы установите и запустите плагин,nodeверсия находится вv6.9.0+а такжеWebpackВерсияv4.0.0+.
Официальный адрес сайта здесь:uglifyjs-webpack-plugin
Установить
npm i uglifyjs-webpack-plugin
использовать
существуетwebpack.config.jsВ соответствии с документом производится следующая конфигурация.
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
// 省略...
mode: "production",
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
// 删除注释
output:{
comments: false
},
compress: {
drop_console: true, // 删除所有调式带有console的
drop_debugger: true,
pure_funcs: ['console.log'] // 删除console.log
}
}
})
]
}
}
После настройки приведенного выше кода перезапустите, чтобы увидеть эффект.Примечание. Код будет работать только в производственной среде., посмотрите на нашу конфигурацию вышеmode: production, то есть производственная среда. Поясним два вышеуказанных свойстваdrop_consoleа такжеpure_funcsРазница между первыми заключается в удалении всех методов отладки с префиксом console, таких как:console.log,console.table,console.dirпока естьconsoleВсе префиксы удалены. Последнее является конфигурацией, то есть значением массива, который он удалит, напримерpure_funcs：[console.log, console.dir]Удаляет только два не удаляемых кодаconsole.tableкод.
Приведенный выше код размещается в производственной среде, и код отладки консоли можно очистить, но есть еще одна проблема, на которую нужно обратить внимание, то есть плагин поддерживает только
ES5синтаксис, если ваш код включаетES6Синтаксис будет неправильным.
terser-webpack-plugin
Плагин такой же, как и вышеuglifyjs-webpack-pluginТе же, используются для сокращения нашего кодаjsразмер кода.
См. описание выше: если вашWebpackЕсли версия выше 5+, то устанавливать это не нужноterser-webpack-pluginплагин, будет в комплектеterser-webpack-plugin. но твойWebpackверсия по прежнему 4, нужно установитьterser-webpack-plugin4 версия
Установить
npm i terser-webpack-plugin@4
использовать
const TerserWebpackPlugin = require("terser-webpack-plugin");
module.exports = {
// 省略...
mode: "production",
optimization: {
minimizer: [
new TerserWebpackPlugin({
terserOptions: {
compress: {
warnings: true,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log', "console.table"] // 删除console
}
}
});
]
}
}
Функция этого подключаемого модуля такая же, как указано выше, и использование атрибута также такое же, единственное, что может поддерживать этот подключаемый модуль.ES6грамматика. все вПроизводственная средаКод вступает в силу.
Конфигурация Vue-Cli
Это вVue-cliРекомендуемый плагин очистки консоли в проекте. Подробнее здесьbabel-plugin-transform-remove-console
Установить
npm i babel-plugin-transform-remove-console --save-dev
использовать
в корневом каталоге проектаbabel.config.jsконфигурация файла. Плагин не различаетПроизводственная средаилисреда разработкидо тех пор, пока ваша конфигурация может вступить в силу.
module.exports = {
plugins: [
"transform-remove-console"
]
}
// 生产环境如下配置
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}
module.exports = {
plugins: [
...prodPlugins
]
}
Простое и грубое удаление
Следующая — эффектная операция, открой глаза и посмотри на нее, хахаха. переписать напрямуюconsole.logМетоды.
console.log = function () {};
Гибкое использование редактора VScode
использовать
Прямой глобальный поиск в этом проектеconsole.logОбычное сопоставление, а затем заменить все на пустое.
console\.log\(.*?\)
Консоль удаления рукописного загрузчика
Давайте напишем простую версию плагина для чистой консоли.
создать новыйjsфайл, я назвал его здесьclearConsole.js, на самом деле, здесь также используется для сопоставления и замены на пустое. Если вы не понимаетеloaderВы можете увидеть мою статьюРукописный ввод Sass-загрузчика.
clearConsole.js
const reg = /(console.log\()(.*)(\))/g;
module.exports = function(source) {
source = source.replace(reg, "")
return source;
}
существуетVue.config.jsнастроить
module.exports = {
// 省略...
configureWebpack: {
module: {
rules: [
{
test: /\.vue$/,
exclude: /node_modules/,
loader: path.resolve(__dirname, "./clearConsole.js")
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: path.resolve(__dirname, "./clearConsole.js")
}
],
}
},
}
Вы можете настроить приведенный выше код~, очиститьjsдокументы иvueв файлеconsole.log.excludeпредставитель не ходитьnode_moduleНайдите в справочнике.
Спасибо за просмотр, если вы были полезны, то можете обратить внимание на номер паблика: фронтальный развлекательный круг
благодарный
Спасибо за чтение этой статьи, я надеюсь, что она может быть вам полезна, и если у вас есть какие-либо вопросы, пожалуйста, поправьте меня.
Я водолаз (✿◡‿◡), если вы считаете, что писать можно, ставьте лайк ❤.
Заинтересованные друзья могут присоединиться[Группа обмена развлекательными кругами]Приветствую всех для обсуждения
Писать нелегко,"Мне нравится" + "Смотрел" + "Ретвитнуть"Спасибо за вашу поддержку ❤
Рекомендовано в прошлом
«В каком сценарии использовать функцию Render, как настроить JSX»
"Поделитесь 15 полезными плагинами для Webpack! ! ! 》
"Поделитесь 12 загрузчиками, обычно используемыми в Webpack"
«Поговорим о том, что такое CommonJs и Es Module и чем они отличаются»
«Знаете ли вы все приемы JavaScript, используемые в этих работах? 》