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

user_4930171 0
Viewed 2572

I am trying the Quasar Framework (for those not familiar, it's based on Vue) and it's going well. However I've tried running a build (npm run build) and get repeated:

error Unexpected console statement no-console

... so the build fails because it sees console.log(...) and is not happy. My options:

  1. don't use console.log in development. But it's handy.
  2. comment out the eslint rule that presumably enforces that, so letting console.log into production. But that's not ideal for performance/security.
  3. have the build automatically remove any console.log. That's what I'm after.

But how?

I took a look at the build 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

... but if that's how, where does that go within Quasar since there is no webpack config file? I imagine in the quasar.conf.js file (since I see an 'extendWebpack' line in there - sounds promising). Or is there a better way to do it? How do other people remove console.log in production when using Quasar? Or handle logging without it?

Thanks!

quasar-framework vue.js webpack
3 Answers

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 }
      }
    },
  }
}

The above will result in configuring terser plugin with the following:

          terserOptions: {
            compress: {
            ...
              drop_console: true
            },

(https://github.com/terser/terser#compress-options)

(you can see the generated config with quasar inspect -c build -p optimization.minimizer)

You still also need to remove the eslint rule to avoid build errors, see https://github.com/quasarframework/quasar/issues/5529

Note: If you want instead to configure webpack directly use:

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
        })
      }
    },
  }
}

It will do the same as above.

See https://quasar.dev/quasar-cli/cli-documentation/handling-webpack

and 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

user_115684920

1 Edit package.json in Vue's project what had created it before.

2 Then find "rules": {}.

3 Change to this "rules":{"no-console":0}.

4 if you Vue server in on, off it and run it again. Then the issue will be done.

user_107834610

As an alternative I can suggest using something like loglevel instead of console.log. It's quite handy and allows you to control the output.

user_157372620
Related