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

Question

我正在试用 Quasar 框架(对于那些不熟悉的人，它基于 Vue)并且进展顺利。但是我已经尝试运行构建(npm run build)并重复:

error Unexpected console statement 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