Babel config is cached between builds

[Astray-git]

Version

3.3.0

Environment info

expand

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0.2
    Safari: 12.0.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.1
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.1
    @vue/babel-preset-app:  3.3.0
    @vue/babel-preset-jsx:  1.0.0-beta.1
    @vue/babel-sugar-functional-vue:  1.0.0-beta.1
    @vue/babel-sugar-inject-h:  1.0.0-beta.1
    @vue/babel-sugar-v-model:  1.0.0-beta.1
    @vue/babel-sugar-v-on:  1.0.0-beta.1
    @vue/cli-overlay:  3.3.0
    @vue/cli-plugin-babel: ^3.3.0 => 3.3.0
    @vue/cli-plugin-eslint: ^3.3.0 => 3.3.0
    @vue/cli-service: ^3.3.0 => 3.3.0
    @vue/cli-shared-utils:  3.3.0
    @vue/component-compiler-utils:  2.5.0
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    babel-plugin-transform-vue-jsx:  4.0.1
    eslint-plugin-vue: ^5.0.0 => 5.1.0
    vue: ^2.5.21 => 2.5.21
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.1
    vue-loader:  15.5.1
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.5.21
    vue-template-es2015-compiler:  1.6.0
  npmGlobalPackages:
    @vue/cli: 3.3.0

Steps to reproduce

I'm building a lib with a demo page with vue-cli
I have following npm scripts:

    "build": "npm run build:demo && npm run build:lib",
    "build:demo": "vue-cli-service build --dest demo",
    "build:lib": "cross-env BUILD_LIB=1 vue-cli-service build --target lib src/components/test.js",

and

useBuiltIns: process.env.BUILD_LIB ? false : 'usage'

in babel.config.js

1. npm run build
2. useBuiltIns is not turned false upon the lib build

I have to run builds separately, with rm -rf ./node_modules/.cache in between to cleanup the config cache.

What is expected?

Babel config should be resolved separately between builds

What is actually happening?

Cached babel config

---

It seems .env variables are not injected before resolve babel config 😣.

[LinusBorg]

We respect the babel.config.js when generating cache keys for cache-loader here:

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-babel/index.js#L46

But the problem is: it uses the files content as a string for the key:

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/PluginAPI.js#L163

this means the cache key is correctly invalidated when you actually change the code in babel.config.js, but it doesn't work when the same code results in a different config (e.g. due to using env variables).

We could do something like this instead:

  .options(api.genCacheConfig('babel-loader', {
    '@babel/core': require('@babel/core/package.json').version,
    '@vue/babel-preset-app': require('@vue/babel-preset-app/package.json').version,
    'babel-loader': require('babel-loader/package.json').version,
    modern: !!process.env.VUE_CLI_MODERN_BUILD,
    browserslist: api.service.pkg.browserslist,
+  babelConfig: JSON.stringify(require(api.resolve('babel.config.js')))
}, [
-             'babel.config.js',
            '.browserslistrc'
]))

...with some error handling added.

[LinusBorg]

As a workaround for the time being, I suggest to empty the cache before building:

"build:demo": "rimraf node_modules/.cache && vue-cli-service build --dest demo"
"build:lib": "rimraf node_modules/.cache && cross-env BUILD_LIB=1 vue-cli-service build --target lib src/components/test.js",