Как удалить console.log из сборки, используя JS Quasar Framework?

Question

Я пробую Quasar Framework (для тех, кто не знаком, он основан на Vue), и все идет хорошо. Однако я попытался запустить сборку (npm run build) и получить повторение:

error Неожиданный оператор консоли no-console

... поэтому сборка завершается неудачно, потому чтоон видит console.log (...) и не счастлив. Мои варианты:

1. не использовать console.log в разработке. Но это удобно.
2. закомментируйте правило eslint, которое, по-видимому, обеспечивает его соблюдение, что позволяет console.log в производство. Но это не идеально для производительности / безопасности.
3. позволяет сборке автоматически удалять любые console.log . Это то, что мне нужно.

Но как?

Я взглянул на сборку https://quasar.dev/quasar-cli/cli-documentation/build-commands, в которой упоминается внутреннее использование webpack и UglifyJS. Учитывая это, я нашел этот ответ для удаления console.log в общем проекте Vue / webpack: https://github.com/vuejs-templates/webpack-simple/issues/21

... но если это так, то где это происходит в Quasar, поскольку нет файла конфигурации webpack? Я представляю в файле quasar.conf.js (так как я вижу там строку "exteWebpack" - звучит многообещающе). Или есть лучший способ сделать это? Как другие люди удаляют console.log в рабочем режиме при использовании Quasar? Или обрабатывать логи без него?

Спасибо!

Answer 1

https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build

quasar.conf.js:

module.exports = function (ctx) {
  return {
  ...
    build: {
    ...
      uglifyOptions: {
        compress: { drop_console: true }
      }
    },
  }
}

Приведенное выше приведёт к настройке плагина terser со следующими параметрами:

          terserOptions: {
            compress: {
            ...
              drop_console: true
            },

(https://github.com/terser/terser#compress-options)

(вы можете увидеть сгенерированный конфиг с помощью quasar inspect -c build -p optimization.minimizer)

Вам также необходимо удалить правило eslint, чтобы избежать ошибок сборки, см. https://github.com/quasarframework/quasar/issues/5529

Примечание:Если вы хотите настроить веб-пакет напрямую, используйте:

quasar.conf.js:

module.exports = function (ctx) {
  return {
  ...
    build: {
    ...
      chainWebpack (chain) {
        chain.optimization.minimizer('js').tap(args => {
          args[0].terserOptions.compress.drop_console = true
          return args
        })
      }
    },
  }
}

Это будет сделано так же, как указано выше.

См. https://quasar.dev/quasar-cli/cli-documentation/handling-webpack

и https://github.com/neutrinojs/webpack-chain#config-optimization-minimizers-modify-arguments

https://github.com/quasarframework/quasar/blob/dev/app/lib/webpack/create-chain.js#L315