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

【问题标题】：How do you remove console.log from a build using the JS Quasar Framework?如何使用 JS Quasar 框架从构建中删除 console.log？
【发布时间】：2020-02-21 23:08:22
【问题描述】：

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

error Unexpected console statement no-console

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

不要在开发中使用 console.log。但它很方便。
注释掉可能强制执行的 eslint 规则，因此让 console.log 进入生产环境。但这对于性能/安全性来说并不理想。
让构建自动删除任何 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？或者不使用它来处理日志记录？

谢谢！

【问题讨论】：

stackoverflow.com/questions/41040266/…
@RobertNiestroj 谢谢。在询问之前我也找到了该页面，但这也使用了直接的 webpack。目前尚不清楚如何适应没有该 webpack 配置文件可以复制到的 Quasar 框架构建

标签： vue.js webpack quasar-framework

【解决方案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

【讨论】：

【解决方案2】：

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

2 然后找到“规则”：{}。

3 更改为这个“规则”：{“no-console”:0}。

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

【讨论】：

【解决方案3】：

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

【讨论】：