No way to not include core-js polyfills for libraries

[wolthers]

Version

3.0.0-rc.5

Reproduction link

https://github.com/wolthers/vue-cli-library-polyfill-bug

Steps to reproduce

1. Check out the repo git clone https://github.com/wolthers/vue-cli-library-polyfill-bug.git
2. Open a terminal and move into the checkout: cd /~/path/to/vue-cli-library-polyfill-bug
3. Build the library by running npm run build
4. Open the build report at /dist/vue-cli-library-polyfill-bug.common-report.html in a browser
5. Observe that polyfills from core-js have been added to the build

What is expected?

No polyfills should be added to the build (or at least that's what I want to achieve)

What is actually happening?

Polyfills from core-js are included in the build

---

I'm building a component library and publishing via vue-cli-service build --target lib..... I only want to transpile but not include any polyfills, as the implementing application is responsible for polyfilling features. As far as I can see there is no option to achieve this.

[sodatea]

https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app#usebuiltins

module.exports = {
  presets: [
    ['@vue/app', {
      useBuiltIns: false
    }]
  ]
}

[wolthers]

Thanks, appreciate it. I tried that on my actual app before creating the issue without success, so figured it wouldn't work in a simple reproduction repo. Any pointer as to why it doesn't work in my actual app?

[sodatea]

Sorry but it is not easy to locate a bug with such limited information…
Maybe caused by some other options in your actual babel config?

[wolthers]

Completely fair. I narrowed it down to a single component that causes the polyfills to be included and pushed again. Can you check out the repo again? https://github.com/wolthers/vue-cli-library-polyfill-bug/commit/6f0bf1f16320c9f9a3b8b1e08a65fb5fea1dc219 and https://github.com/wolthers/vue-cli-library-polyfill-bug/commit/7bddd702897d4d42f08b3f9671b80d71ed25b007

[wolthers]

Narrowed it down even further. Now the repo is and index file that exports 1 component that looks like this:

<template>
  <div></div>
</template>

<script>
const theme = "red";

export default {
  computed: {
    classObject() {
      return {
        [`hui-toast--${theme}`]: true
      };
    }
  }
};
</script>

<style>
.hui-toast {
}
</style>

Even with useBuiltIns: false, the polyfills are included:

[sodatea]

FYI the imported core-js module is not a polyfill, but a runtime helper (added by https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-computed-properties/src/index.js#L97).

But not sure why it even includes ie8 related code in the final build. Will investigate later…

[yyx990803]

It seems some babel transforms (like the computed property here) requires runtime helpers / polyfills in a way that makes it difficult to leave the polyfill responsibility to the consuming application. IMO this is more like an issue for this specific transform and there's not much we can do in Vue CLI. I would personally avoid using computed property in order to circumvent the problem.