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

Question

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

error Unexpected console statement no-console

... 所以构建失败，因为它看到 console.log(...) 并且不高兴。我的选择：

不要在开发中使用console.log。不过好用。
注释掉可能强制执行该规则的 eslint 规则，因此让 console.log 投入生产。但这对 performance/security.
让构建自动删除任何 console.log。这就是我所追求的。

但是如何呢？

我看了一下构建https://quasar.dev/quasar-cli/cli-documentation/build-commands and it mentions using webpack internally and UglifyJS too. Given that, I found this answer for removing console.log in a general Vue/webpack project: 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

Answer 2

1 在 Vue 的项目中编辑 package.json 之前创建它的内容。

2 然后找到"rules": {}.

3 更改为此 "rules"：{"no-console":0}。

4 如果您打开 Vue 服务器，请关闭它并再次运行。那么问题就搞定了

Answer 3

作为替代方案，我可以建议使用 loglevel 之类的东西而不是 console.log。它非常方便，允许您控制输出。

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

How do you remove console.log from a build using the JS Quasar Framework?

vue.js

webpack

quasar-framework