fix($core): include polyfills correctly (close #1168)

[psalaets]

Summary

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• Chrome - 81
• Firefox - 75
• Safari - 13.1
• Edge - 81
• IE - 11

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature
• Related documents have been updated
• Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

This change passes the list of entry files into the options of @vue/babel-preset-app.

I spent some time looking at #1168 and this is what I found out:

@vue/babel-preset-app invokes @babel/preset-env with its useBuiltIns: 'usage' option, which means polyfills are only added if the user's code makes use of those language features.

But, @vue/babel-preset-app will try to auto-include 4 specific polyfills, if the target env needs them. These polyfills for language features needed by libraries that are usually used with vue (e.g. vuex, vue-router). By default, @babel/preset-env with useBuiltIns: usage doesn't look at dependencies, so auto-including the polyfills is a way to ensure they're available in a vue app.

The 4 polyfills are:

• es.array.iterator
• es.promise
• es.object.assign
• es.promise.finally

In @vue/babel-preset-app, there is a private babel plugin called polyfillsPlugin which adds the polyfills to the top of the files specified by the "entryFiles" option. Due to the way vuepress currently invokes @vue/babel-preset-app, no entry files are specified so the auto-included polyfills never make it into the bundle.

[meteorlxy]

Great thanks for your investigation! This PR indeed fix the four extra polyfills! 👍

However, some other polyfills are still not included correctly. E.g. Array.from 🤔

[psalaets]

I was so focused on getting the 4 polyfills included that I didn't look closely enough at the others.

I will look into it.

[psalaets]

I think I've got it fixed now.

The problem

When transpiling certain syntax, babel injects helper code that uses APIs (e.g. Symbol, Array.from()) that are not supported in older environments.

vue-cli

I don't see this problem in a "hello world" app generated by vue-cli so I looked at how it handles the issue.

Apps generated by vue-cli have a check that includes @babel/runtime in the transpilation process.

My change

Added same check as seen in the vue-cli code.

Long term fix

Looks like babel project is preparing some changes that should make this workaround unnecessary: https://github.com/babel/babel/projects/12

edit: I've also got a VM set up now so I can test in IE11 and Edge. I updated my original PR comment with the versions.

[meteorlxy]

@psalaets Really appreciate it!

[meteorlxy]

LGTM