From 37cc74d966d680013f2c270cbca5f9417a1d0833 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Sat, 30 Mar 2019 01:44:33 +0800 Subject: [PATCH] fix: should not add polyfills from transform-runtime plugin It is due to a misunderstanding when upgrading babel from 7.0.0-beta.47 to 7.x. In Vue CLI, usage-based polyfills are **only** added by @babel/preset-env so that it avoids overheads. `transform-runtime` plugin adds polyfills regardless of env targets so we must disable its polyfill feature. Though, there're edge cases where runtime-helpers' polyfill dependency are not correctly added (https://github.com/babel/babel/issues/7597), so we also need to whitelist `@babel/runtime` for webpack to transpile. --- .../babel-preset-app/__tests__/babel-preset.spec.js | 10 +++++----- packages/@vue/babel-preset-app/index.js | 8 ++++---- packages/@vue/babel-preset-app/package.json | 1 - packages/@vue/cli-plugin-babel/index.js | 5 +++++ 4 files changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/@vue/babel-preset-app/__tests__/babel-preset.spec.js b/packages/@vue/babel-preset-app/__tests__/babel-preset.spec.js index 1b8bd2533e..ccc4b1d0f5 100644 --- a/packages/@vue/babel-preset-app/__tests__/babel-preset.spec.js +++ b/packages/@vue/babel-preset-app/__tests__/babel-preset.spec.js @@ -45,7 +45,7 @@ test('polyfill detection', () => { // promise polyfill alone doesn't work in IE, needs this as well. fix: #1642 expect(code).toMatch(genCoreJSImportRegExp('es6.array.iterator')) // usage-based detection - expect(code).toMatch(/import _Map from ".*runtime-corejs2\/core-js\/map"/) + expect(code).toMatch(/import "core-js\/modules\/es6.map"/) }) test('modern mode always skips polyfills', () => { @@ -63,7 +63,7 @@ test('modern mode always skips polyfills', () => { // default includes expect(code).not.toMatch(genCoreJSImportRegExp('es6.promise')) // usage-based detection - expect(code).not.toMatch(/import _Map from ".*runtime-corejs2\/core-js\/map"/) + expect(code).not.toMatch(/import "core-js\/modules\/es6.map"/) ;({ code } = babel.transformSync(` const a = new Map() @@ -78,7 +78,7 @@ test('modern mode always skips polyfills', () => { // default includes expect(code).not.toMatch(genCoreJSImportRegExp('es6.promise')) // usage-based detection - expect(code).not.toMatch(/import _Map from ".*runtime-corejs2\/core-js\/map"/) + expect(code).not.toMatch(/import "core-js\/modules\/es6.map"/) delete process.env.VUE_CLI_MODERN_BUILD }) @@ -107,7 +107,7 @@ test('async/await', () => { // 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\/helpers\/esm\/asyncToGenerator\"/) }) test('jsx', () => { @@ -152,5 +152,5 @@ 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/helpers/esm/toConsumableArray"') }) diff --git a/packages/@vue/babel-preset-app/index.js b/packages/@vue/babel-preset-app/index.js index 39f23d7037..327b441492 100644 --- a/packages/@vue/babel-preset-app/index.js +++ b/packages/@vue/babel-preset-app/index.js @@ -151,10 +151,10 @@ 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, diff --git a/packages/@vue/babel-preset-app/package.json b/packages/@vue/babel-preset-app/package.json index 195fc9275f..1b7d69ba02 100644 --- a/packages/@vue/babel-preset-app/package.json +++ b/packages/@vue/babel-preset-app/package.json @@ -30,7 +30,6 @@ "@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", "@vue/babel-preset-jsx": "^1.0.0-beta.2", "babel-plugin-dynamic-import-node": "^2.2.0", "core-js": "^2.6.5" diff --git a/packages/@vue/cli-plugin-babel/index.js b/packages/@vue/cli-plugin-babel/index.js index 55ea4e6c7d..aadc3be211 100644 --- a/packages/@vue/cli-plugin-babel/index.js +++ b/packages/@vue/cli-plugin-babel/index.js @@ -40,6 +40,11 @@ module.exports = (api, options) => { if (transpileDepRegex && transpileDepRegex.test(filepath)) { return false } + // may need to add polyfills (by preset-env) for babel helpers + // https://github.com/babel/babel/issues/7597 + if (/node_modules\/@babel\/runtime/.test(filepath)) { + return false + } // Don't transpile node_modules return /node_modules/.test(filepath) })