feat!: upgrade to core-js 3 (#3912)

Author: haoqunjiang

packages/@vue/babel-preset-app/__tests__/babel-preset.spec.js

@@ -27,9 +27,9 @@ test('polyfill detection', () => {
     filename: 'test-entry-file.js'
   })
   // default includes
-  expect(code).not.toMatch(genCoreJSImportRegExp('es6.promise'))
+  expect(code).not.toMatch(genCoreJSImportRegExp('es.promise'))
   // usage-based detection
-  expect(code).not.toMatch(genCoreJSImportRegExp('es6.map'))
+  expect(code).not.toMatch(genCoreJSImportRegExp('es.map'))
 
   ;({ code } = babel.transformSync(`
     const a = new Map()
@@ -41,11 +41,11 @@ test('polyfill detection', () => {
     filename: 'test-entry-file.js'
   }))
   // default includes
-  expect(code).toMatch(genCoreJSImportRegExp('es6.promise'))
+  expect(code).toMatch(genCoreJSImportRegExp('es.promise'))
   // promise polyfill alone doesn't work in IE, needs this as well. fix: #1642
-  expect(code).toMatch(genCoreJSImportRegExp('es6.array.iterator'))
+  expect(code).toMatch(genCoreJSImportRegExp('es.array.iterator'))
   // usage-based detection
-  expect(code).toMatch(/import _Map from ".*runtime-corejs2\/core-js\/map"/)
+  expect(code).toMatch('import "core-js/modules/es.map"')
 })
 
 test('modern mode always skips polyfills', () => {
@@ -61,9 +61,9 @@ test('modern mode always skips polyfills', () => {
     filename: 'test-entry-file.js'
   })
   // default includes
-  expect(code).not.toMatch(genCoreJSImportRegExp('es6.promise'))
+  expect(code).not.toMatch(genCoreJSImportRegExp('es.promise'))
   // usage-based detection
-  expect(code).not.toMatch(/import _Map from ".*runtime-corejs2\/core-js\/map"/)
+  expect(code).not.toMatch(/import _Map from ".*runtime-corejs3\/core-js\/map"/)
 
   ;({ code } = babel.transformSync(`
     const a = new Map()
@@ -76,9 +76,9 @@ test('modern mode always skips polyfills', () => {
     filename: 'test-entry-file.js'
   }))
   // default includes
-  expect(code).not.toMatch(genCoreJSImportRegExp('es6.promise'))
+  expect(code).not.toMatch(genCoreJSImportRegExp('es.promise'))
   // usage-based detection
-  expect(code).not.toMatch(/import _Map from ".*runtime-corejs2\/core-js\/map"/)
+  expect(code).not.toMatch(/import _Map from ".*runtime-corejs3\/core-js\/map"/)
   delete process.env.VUE_CLI_MODERN_BUILD
 })
 
@@ -103,11 +103,11 @@ test('async/await', () => {
     }
     hello()
   `.trim(), defaultOptions)
-  expect(code).toMatch(genCoreJSImportRegExp('es6.promise'))
+  expect(code).toMatch(genCoreJSImportRegExp('es.promise'))
   // should use regenerator runtime
   expect(code).toMatch(`import "regenerator-runtime/runtime"`)
   // should use required helper instead of inline
-  expect(code).toMatch(/import _asyncToGenerator from ".*runtime-corejs2\/helpers\/esm\/asyncToGenerator\"/)
+  expect(code).toMatch(/import _asyncToGenerator from ".*runtime-corejs3\/helpers\/esm\/asyncToGenerator\"/)
 })
 
 test('jsx', () => {
@@ -152,6 +152,6 @@ test('disable absoluteRuntime', () => {
     filename: 'test-entry-file.js'
   })
 
-  expect(code).toMatch('import _toConsumableArray from "@babel/runtime-corejs2/helpers/esm/toConsumableArray"')
+  expect(code).toMatch('import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray"')
   // expect(code).not.toMatch(genCoreJSImportRegExp('es6.promise'))
 })

packages/@vue/babel-preset-app/index.js

@@ -3,19 +3,20 @@ const path = require('path')
 const defaultPolyfills = [
   // promise polyfill alone doesn't work in IE,
   // needs this as well. see: #1642
-  'es6.array.iterator',
+  'es.array.iterator',
   // this is required for webpack code splitting, vuex etc.
-  'es6.promise',
+  'es.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',
+  'es.object.assign',
   // #2012 es6.promise replaces native Promise in FF and causes missing finally
-  'es7.promise.finally'
+  'es.promise.finally'
 ]
 
+// FIXME:
 function getPolyfills (targets, includes, { ignoreBrowserslistConfig, configPath }) {
   const { isPluginRequired } = require('@babel/preset-env')
-  const builtInsList = require('@babel/preset-env/data/built-ins.json')
+  const builtInsList = require('core-js-compat/data')
   const getTargets = require('@babel/preset-env/lib/targets-parser').default
   const builtInTargets = getTargets(targets, {
     ignoreBrowserslistConfig,
@@ -37,6 +38,7 @@ module.exports = (context, options = {}) => {
     presets.push([require('@vue/babel-preset-jsx'), typeof options.jsx === 'object' ? options.jsx : {}])
   }
 
+  const runtimePath = path.dirname(require.resolve('@babel/runtime/package.json'))
   const {
     polyfills: userPolyfills,
     loose = false,
@@ -62,7 +64,7 @@ module.exports = (context, options = {}) => {
     // However, this may cause hash inconsitency if the project is moved to another directory.
     // So here we allow user to explicit disable this option if hash consistency is a requirement
     // and the runtime version is sure to be correct.
-    absoluteRuntime = path.dirname(require.resolve('@babel/runtime/package.json'))
+    absoluteRuntime = runtimePath
   } = options
 
   // resolve targets
@@ -115,6 +117,7 @@ module.exports = (context, options = {}) => {
   }
 
   const envOptions = {
+    corejs: 3,
     spec,
     loose,
     debug,
@@ -154,16 +157,31 @@ module.exports = (context, options = {}) => {
   // transform runtime, but only for helpers
   plugins.push([require('@babel/plugin-transform-runtime'), {
     regenerator: useBuiltIns !== 'usage',
-    // use @babel/runtime-corejs2 so that helpers that need polyfillable APIs will reference core-js instead.
-    // if useBuiltIns is not set to 'usage', then it means users would take care of the polyfills on their own,
-    // i.e., core-js 2 is no longer needed.
-    corejs: (useBuiltIns === 'usage' && !process.env.VUE_CLI_MODERN_BUILD) ? 2 : false,
+
+    // polyfills are injected by preset-env & polyfillsPlugin, so no need to add them again
+    corejs: false,
+
     helpers: useBuiltIns === 'usage',
     useESModules: !process.env.VUE_CLI_BABEL_TRANSPILE_MODULES,
 
     absoluteRuntime
   }])
 
+  // use @babel/runtime-corejs3 so that helpers that need polyfillable APIs will reference core-js instead.
+  // if useBuiltIns is not set to 'usage', then it means users would take care of the polyfills on their own,
+  // i.e., core-js 3 is no longer needed.
+  // this extra plugin can be removed once this issue resolves:
+  // https://github.com/babel/babel/issues/9903
+  if (useBuiltIns === 'usage' && !process.env.VUE_CLI_MODERN_BUILD) {
+    const runtimeCoreJs3Path = path.dirname(require.resolve('@babel/runtime-corejs3/package.json'))
+    plugins.push([require('babel-plugin-module-resolver'), {
+      alias: {
+        '@babel/runtime': '@babel/runtime-corejs3',
+        [runtimePath]: runtimeCoreJs3Path
+      }
+    }])
+  }
+
   return {
     presets,
     plugins

packages/@vue/babel-preset-app/package.json

@@ -27,13 +27,15 @@
     "@babel/plugin-proposal-decorators": "^7.1.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-syntax-jsx": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.4.0",
-    "@babel/preset-env": "^7.0.0 < 7.4.0",
-    "@babel/runtime": "^7.0.0",
-    "@babel/runtime-corejs2": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/runtime": "^7.4.3",
+    "@babel/runtime-corejs3": "^7.4.3",
     "@vue/babel-preset-jsx": "^1.0.0-beta.3",
     "babel-plugin-dynamic-import-node": "^2.2.0",
-    "core-js": "^2.6.5"
+    "babel-plugin-module-resolver": "^3.2.0",
+    "core-js": "^3.0.1",
+    "core-js-compat": "^3.0.1"
   },
   "gitHead": "0dc793497281718762a5477a3de4a7ee439cdda6"
 }

packages/@vue/cli-plugin-babel/generator.js

@@ -10,7 +10,7 @@ module.exports = api => {
       presets: ['@vue/app']
     },
     dependencies: {
-      'core-js': '^2.6.5'
+      'core-js': '^3.0.1'
     }
   })
 }

packages/@vue/cli-ui-addon-webpack/package.json

@@ -22,6 +22,7 @@
     "@vue/cli-plugin-eslint": "^3.6.0",
     "@vue/cli-service": "^3.6.0",
     "@vue/eslint-config-standard": "^4.0.0",
+    "core-js": "^3.0.1",
     "eslint": "^5.16.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",

packages/@vue/cli-ui-addon-widgets/package.json

@@ -22,6 +22,7 @@
     "@vue/cli-plugin-eslint": "^3.6.0",
     "@vue/cli-service": "^3.6.0",
     "@vue/eslint-config-standard": "^4.0.0",
+    "core-js": "^3.0.1",
     "eslint": "^5.16.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",

packages/@vue/cli-ui/package.json

@@ -72,6 +72,7 @@
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/ui": "^0.9.1",
     "ansi_up": "^3.0.0",
+    "core-js": "^3.0.1",
     "cross-env": "^5.1.5",
     "eslint": "^5.16.0",
     "eslint-plugin-graphql": "^3.0.3",