2

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!

coder_uk
  • 657
  • 1
  • 8
  • 20
  • https://stackoverflow.com/questions/41040266/remove-console-logs-with-webpack-uglify – Robert Niestroj Oct 25 '19 at 20:14
  • @RobertNiestroj Thanks. I found that page too before asking, but that also uses a direct webpack. It's not clear how to fit in with a Quasar framework build which doesn't have that webpack config file to just copy into – coder_uk Oct 25 '19 at 20:35

3 Answers3

5

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

Ejez
  • 814
  • 8
  • 11
0

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.

Ardalan Farkhondeh
  • 66
  • 3
0

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.

tandrew
  • 11
  • 3