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

Question

我正在尝试 Quasar 框架（对于那些不熟悉的人，它基于 Vue）并且进展顺利。但是我试过运行构建（npm run build）并重复：

错误意外的控制台语句 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。鉴于此，我在通用 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