A way to detect modern/legacy build

[Djaler]

What problem does this feature solve?

I use css variables in my application. But they are not supported in old browsers. Because of this I need to use css-vars-ponyfill. But call to this library is necessary only in old browsers. And because of this I need a way to detect modern/legacy build to include this code only in legacy build.

What does the proposed API look like?

I think, information about current build type could be accessed via process.env variable.
For example: process.env.IS_MODERN_BUILD

[cainrus]

You can generate multiple arguments based bundles.

const isModern = !!require('yargs').argv.modern;
// ...
webpackConfig.plugins.push(
  new webpack.ProvidePlugin({ 'process.env.IS_MODERN_BUILD': isModern}),
);

[Djaler]

@cainrus this way I can only detect modern mode, but not modern build. Because in modern mode 2 builds are created: legacy and modern.

[haoqunjiang]

We use this line to detect modern/legacy build internally:

vue-cli/packages/@vue/cli-service/lib/config/app.js

Line 23 in 5d49d57

const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD

Though it's not a good practice to rely on internal flags, you can use the two environment variables as a workaround for now.

[Djaler]

@sodatea I tried, but they are not available in client code

[haoqunjiang]

@Djaler

// vue.config.js
module.exports = {
  chainWebpack: config =>
    config
      .plugin('define')
        .tap(options => {
          options[0]['process.env']['IS_MODERN_BUILD'] = process.env.VUE_CLI_MODERN_BUILD
          return options
        })
}

[Djaler]

@sodatea thank you! This works as expected.
Can you also help me yet another time? Why this doesn't work?

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          'IS_MODERN_BUILD': process.env.VUE_CLI_MODERN_BUILD,
        },
      }),
    ]
  }
}

[haoqunjiang]

@Djaler Maybe it's because there's already a DefinePlugin instance in the config and webpack-merge can't merge the two correctly?

[LinusBorg]

@sodatea Whould there be any concern with exposing this flag as a public API by mentioning it in the docs?

I don't see a clever way of making this available without an env variable.

To keep internals separate, we could introduce a different env variable for the public that (for now) just is set alongside VUE_CLI_MODERN_BUILD.

[haoqunjiang]

@LinusBorg Yeah I just reconsidered this issue and found no better way to achieve this.

It should be documented somewhere, along with the recommended way to use it (vue.config.js will be required once and once only, so reference to VUE_CLI_MODERN_MODE has to be inside a function, e.g. chainWebpack).

The naming seems fine as it reflects the fact that it is expected to be used in a Vue CLI build config file.