feat(babel-preset-app): support specifying core-js version (#5411)

examples/markdownit/pages/index.vue

@@ -6,8 +6,6 @@
   Data model is: {{ model }}
 
   <NuxtLink to="/about">Goto About</NuxtLink>
-
-  <NuxtLink to="/pug">Goto Pug</NuxtLink>
 </template>
 
 <script>

package.json

@@ -67,8 +67,6 @@
     "lerna": "^3.13.1",
     "lodash": "^4.17.11",
     "node-fetch": "^2.3.0",
-    "pug": "^2.0.3",
-    "pug-plain-loader": "^1.0.0",
     "puppeteer-core": "^1.14.0",
     "request": "^2.88.0",
     "request-promise-native": "^1.0.7",

packages/babel-preset-app/README.md

@@ -15,6 +15,18 @@ babel: {
   }
 }
 ```
+
+**Note**: Since `core-js@2` and `core-js@3` are both supported from Babel 7.4.0, we recommend directly adding `core-js` and setting the version via the [`corejs`](#corejs) option.
+
+```sh
+yarn add --dev core-js@3 @babel/runtime-corejs3
+
+# or
+
+yarn add --dev core-js@2 @babel/runtime-corejs2
+
+```
+
 ...where `options` is an object with parameters, for example:
 ```
  const options = {
@@ -37,7 +49,7 @@ Below is a list of all available parameters:
 * **loose**, default `false` - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#loose)' parameter and also sets `loose=true` for `@babel/plugin-proposal-class-properties`
 * **modern** passed by builder, either `true` or `false`
 * **modules**, default `false` - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#modules)' parameter
-* **polyfills**, default `['es6.array.iterator','es6.promise','es6.object.assign','es7.promise.finally']`, more [in the corresponding repository](https://github.com/zloirock/core-js)
+* **polyfills**, default `core-js@2: ['es6.array.iterator','es6.promise','es6.object.assign','es7.promise.finally']`, `core-js@3: ['es.array.iterator','es.promise','es.object.assign','es.promise.finally']`, more [in the corresponding repository](https://github.com/zloirock/core-js)
 * **shippedProposals** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#shippedproposals)' parameter
 * **spec** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#spec)' parameter
 * **targets** - '[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#targets)' parameter

packages/babel-preset-app/src/index.js

@@ -1,19 +1,39 @@
-const defaultPolyfills = [
-  // Promise polyfill alone doesn't work in IE,
-  // Needs this as well. see: #1642
-  'es6.array.iterator',
-  // This is required for webpack code splitting, vuex etc.
-  'es6.promise',
-  // this is needed for object rest spread support in templates
-  // as vue-template-es2015-compiler 1.8+ compiles it to Object.assign() calls.
-  'es6.object.assign',
-  // #2012 es7.promise replaces native Promise in FF and causes missing finally
-  'es7.promise.finally'
-]
+const coreJsMeta = {
+  2: {
+    prefixes: {
+      es6: 'es6',
+      es7: 'es7'
+    },
+    builtIns: '@babel/preset-env/data/built-ins.json.js'
+  },
+  3: {
+    prefixes: {
+      es6: 'es',
+      es7: 'es'
+    },
+    builtIns: 'core-js-compat/data'
+  }
+}
 
-function getPolyfills(targets, includes, { ignoreBrowserslistConfig, configPath }) {
+function getDefaultPolyfills(corejs) {
+  const { prefixes: { es6, es7 } } = coreJsMeta[corejs.version]
+  return [
+    // Promise polyfill alone doesn't work in IE,
+    // Needs this as well. see: #1642
+    `${es6}.array.iterator`,
+    // This is required for webpack code splitting, vuex etc.
+    `${es6}.promise`,
+    // this is needed for object rest spread support in templates
+    // as vue-template-es2015-compiler 1.8+ compiles it to Object.assign() calls.
+    `${es6}.object.assign`,
+    // #2012 es7.promise replaces native Promise in FF and causes missing finally
+    `${es7}.promise.finally`
+  ]
+}
+
+function getPolyfills(targets, includes, { ignoreBrowserslistConfig, configPath, corejs }) {
   const { isPluginRequired } = require('@babel/preset-env')
-  const builtInsList = require('@babel/preset-env/data/built-ins.json.js')
+  const builtInsList = require(coreJsMeta[corejs.version].builtIns)
   const getTargets = require('@babel/preset-env/lib/targets-parser').default
   const builtInTargets = getTargets(targets, {
     ignoreBrowserslistConfig,
@@ -48,6 +68,12 @@ module.exports = (context, options = {}) => {
     absoluteRuntime
   } = options
 
+  let { corejs = { version: 2 } } = options
+
+  if (typeof corejs !== 'object') {
+    corejs = { version: Number(corejs) }
+  }
+
   let { targets } = options
   if (modern === true) {
     targets = { esmodules: true }
@@ -57,17 +83,16 @@ module.exports = (context, options = {}) => {
 
   let polyfills
   if (modern === false && useBuiltIns === 'usage' && buildTarget === 'client') {
-    polyfills = getPolyfills(targets, userPolyfills || defaultPolyfills, {
+    polyfills = getPolyfills(targets, userPolyfills || getDefaultPolyfills(corejs), {
       ignoreBrowserslistConfig,
-      configPath
+      configPath,
+      corejs
     })
     plugins.push([require('./polyfills-plugin'), { polyfills }])
   } else {
     polyfills = []
   }
 
-  const corejs = { version: 2 }
-
   // Pass options along to babel-preset-env
   presets.push([
     require('@babel/preset-env'), {

packages/vue-app/package.json

@@ -12,7 +12,6 @@
   "main": "dist/vue-app.js",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "core-js": "^2.6.5",
     "node-fetch": "^2.3.0",
     "unfetch": "^4.1.0",
     "vue": "^2.6.10",

test/e2e/basic.browser.test.js

@@ -212,12 +212,6 @@ describe('basic browser', () => {
     expect(await page.$text('h1')).toBe('Displayed only on client-side')
   })
 
-  test('/pug', async () => {
-    await page.nuxt.navigate('/pug')
-
-    expect(await page.$text('h1')).toBe('Pug page')
-  })
-
   test('/meta', async () => {
     await page.nuxt.navigate('/meta')