如何使用JS Quasar Framework从构建中删除console.log？

Question

我正在尝试使用Quasar框架（对于不熟悉的人，它基于Vue），并且运行良好。但是我试过运行一个构建（npm run build）并重复执行：

错误意外的控制台语句无控制台

...因此构建失败，因为它看到console.log（...）并且不满意。我的选择：

1. 请勿在开发中使用console.log。但这很方便。
2. 注释掉可能强制执行的eslint规则，因此将console.log投入生产。但这对于性能/安全性而言并不理想。
3. 具有该版本会自动删除任何console.log。这就是我所追求的。

但是如何？

我看过构建https://quasar.dev/quasar-cli/cli-documentation/build-commands，它提到内部使用webpack和UglifyJS。鉴于此，我在通用Vue / webpack项目中找到了删除console.log的答案：https://github.com/vuejs-templates/webpack-simple/issues/21

...但是如果那样的话，由于没有webpack配置文件，在Quasar中该怎么办？我想象在quasar.conf.js文件中（因为我在那里看到了“ extendWebpack”行-听起来很有希望）。还是有更好的方法呢？使用Quasar时，其他人如何删除生产中的console.log？还是处理没有它的日志记录？

谢谢！

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

注意：如果您想直接配置webpack，请使用：

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