From 2726dca2992690c28dc2ab36eccde56f1eb8b0ea Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Thu, 8 Apr 2021 17:04:19 +0800
Subject: [PATCH 01/10] test: add test for skipping safari nomodule fix
 injection

---
 .../cli-service/__tests__/modernMode.spec.js  | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/@vue/cli-service/__tests__/modernMode.spec.js b/packages/@vue/cli-service/__tests__/modernMode.spec.js
index b74d9fec8f..f509b692d4 100644
--- a/packages/@vue/cli-service/__tests__/modernMode.spec.js
+++ b/packages/@vue/cli-service/__tests__/modernMode.spec.js
@@ -43,10 +43,6 @@ test('modern mode', async () => {
   expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors-legacy\.\w{8}\.js" nomodule>/)
   expect(index).toMatch(/<script defer="defer" src="\/js\/app-legacy\.\w{8}\.js" nomodule>/)
 
-  // should inject Safari 10 nomodule fix
-  const { safariFix } = require('../lib/webpack/ModernModePlugin')
-  expect(index).toMatch(`<script>${safariFix}</script>`)
-
   // Test crossorigin="use-credentials"
   await project.write('vue.config.js', `module.exports = { crossorigin: 'use-credentials' }`)
   const { stdout: stdout2 } = await project.run('vue-cli-service build --modern')
@@ -82,18 +78,42 @@ test('modern mode', async () => {
   expect(await getH1Text()).toMatch('Welcome to Your Vue.js App')
 })
 
-test('no-unsafe-inline', async () => {
-  const project = await create('no-unsafe-inline', defaultPreset)
+test('should not inject the nomodule-fix script if Safari 10 is not targeted', async () => {
+  // the default targets already excludes safari 10
+  const project = await create('skip-safari-fix', defaultPreset)
 
-  const { stdout } = await project.run('vue-cli-service build --modern --no-unsafe-inline')
+  const { stdout } = await project.run('vue-cli-service build --modern')
   expect(stdout).toMatch('Build complete.')
 
+  // should contain no inline scripts in the output html
+  const index = await project.read('dist/index.html')
+  expect(index).not.toMatch(/[^>]\s*<\/script>/)
+  // should not contain the safari-nomodule-fix bundle, either
+  const files = await fs.readdir(path.join(project.dir, 'dist/js'))
+  expect(files.some(f => /^safari-nomodule-fix\.js$/.test(f))).toBe(false)
+})
+
+test('should inject nomodule-fix script when Safari 10 support is required', async () => {
+  const project = await create('safari-nomodule-fix', defaultPreset)
+
+  const pkg = JSON.parse(await project.read('package.json'))
+  pkg.browserslist.push('safari > 10')
+  await project.write('package.json', JSON.stringify(pkg, null, 2))
+
+  let { stdout } = await project.run('vue-cli-service build --modern')
+  let index = await project.read('dist/index.html')
+  // should inject Safari 10 nomodule fix as an inline script
+  const { safariFix } = require('../lib/webpack/ModernModePlugin')
+  expect(index).toMatch(`<script>${safariFix}</script>`)
+
+  // `--no-unsafe-inline` option
+  stdout = (await project.run('vue-cli-service build --modern --no-unsafe-inline')).stdout
+  expect(stdout).toMatch('Build complete.')
   // should output a separate safari-nomodule-fix bundle
   const files = await fs.readdir(path.join(project.dir, 'dist/js'))
   expect(files.some(f => /^safari-nomodule-fix\.js$/.test(f))).toBe(true)
-
   // should contain no inline scripts in the output html
-  const index = await project.read('dist/index.html')
+  index = await project.read('dist/index.html')
   expect(index).not.toMatch(/[^>]\s*<\/script>/)
 })
 

From 1b21eb271cec98aee25551a535ed700ddfe44ae9 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Thu, 8 Apr 2021 23:13:54 +0800
Subject: [PATCH 02/10] feat: only inject safari-nomodule-fix when necessary

---
 packages/@vue/cli-service/lib/util/targets.js | 50 ++++++++++++++++
 .../lib/webpack/ModernModePlugin.js           | 60 +++++++++++--------
 packages/@vue/cli-service/package.json        |  1 +
 3 files changed, 87 insertions(+), 24 deletions(-)
 create mode 100644 packages/@vue/cli-service/lib/util/targets.js

diff --git a/packages/@vue/cli-service/lib/util/targets.js b/packages/@vue/cli-service/lib/util/targets.js
new file mode 100644
index 0000000000..bd2ce6b20c
--- /dev/null
+++ b/packages/@vue/cli-service/lib/util/targets.js
@@ -0,0 +1,50 @@
+// copied from @vue/babel-preset-app
+
+const { semver } = require('@vue/cli-shared-utils')
+const { default: getTargets } = require('@babel/helper-compilation-targets')
+
+const allModernTargets = getTargets(
+  { esmodules: true },
+  { ignoreBrowserslistConfig: true }
+)
+
+function getIntersectionTargets (targets, constraintTargets) {
+  const intersection = Object.keys(constraintTargets).reduce(
+    (results, browser) => {
+      // exclude the browsers that the user does not need
+      if (!targets[browser]) {
+        return results
+      }
+
+      // if the user-specified version is higher the minimum version that supports esmodule, than use it
+      results[browser] = semver.gt(
+        semver.coerce(constraintTargets[browser]),
+        semver.coerce(targets[browser])
+      )
+        ? constraintTargets[browser]
+        : targets[browser]
+
+      return results
+    },
+    {}
+  )
+
+  return intersection
+}
+
+function getModernTargets (targets) {
+  // use the intersection of modern mode browsers and user defined targets config
+  return getIntersectionTargets(targets, allModernTargets)
+}
+
+const projectTargets = getTargets()
+const projectModernTargets = getModernTargets(projectTargets)
+
+module.exports = {
+  getTargets,
+  getModernTargets,
+  getIntersectionTargets,
+
+  projectTargets,
+  projectModernTargets
+}
diff --git a/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js b/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js
index 3e3d3a7b44..180143465c 100644
--- a/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js
+++ b/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js
@@ -2,6 +2,16 @@ const fs = require('fs-extra')
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
+const { semver } = require('@vue/cli-shared-utils')
+const { projectModernTargets } = require('../util/targets')
+
+const minSafariVersion = projectModernTargets.safari
+const minIOSVersion = projectModernTargets.ios
+const supportsSafari10 =
+  (minSafariVersion && semver.lt(semver.coerce(minSafariVersion), '11.0.0')) ||
+  (minIOSVersion && semver.lt(semver.coerce(minIOSVersion), '11.0.0'))
+const needsSafariFix = supportsSafari10
+
 // https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
 const safariFix = `!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();`
 
@@ -77,32 +87,34 @@ class ModernModePlugin {
           .filter(a => a.tagName === 'script' && a.attributes)
         legacyAssets.forEach(a => { a.attributes.nomodule = '' })
 
-        if (this.unsafeInline) {
-          // inject inline Safari 10 nomodule fix
-          tags.push({
-            tagName: 'script',
-            closeTag: true,
-            innerHTML: safariFix
-          })
-        } else {
-          // inject the fix as an external script
-          const safariFixPath = path.join(this.jsDirectory, 'safari-nomodule-fix.js')
-          const fullSafariFixPath = path.join(compilation.options.output.publicPath, safariFixPath)
-          compilation.assets[safariFixPath] = {
-            source: function () {
-              return Buffer.from(safariFix)
-            },
-            size: function () {
-              return Buffer.byteLength(safariFix)
+        if (needsSafariFix) {
+          if (this.unsafeInline) {
+            // inject inline Safari 10 nomodule fix
+            tags.push({
+              tagName: 'script',
+              closeTag: true,
+              innerHTML: safariFix
+            })
+          } else {
+            // inject the fix as an external script
+            const safariFixPath = path.join(this.jsDirectory, 'safari-nomodule-fix.js')
+            const fullSafariFixPath = path.join(compilation.options.output.publicPath, safariFixPath)
+            compilation.assets[safariFixPath] = {
+              source: function () {
+                return Buffer.from(safariFix)
+              },
+              size: function () {
+                return Buffer.byteLength(safariFix)
+              }
             }
+            tags.push({
+              tagName: 'script',
+              closeTag: true,
+              attributes: {
+                src: fullSafariFixPath
+              }
+            })
           }
-          tags.push({
-            tagName: 'script',
-            closeTag: true,
-            attributes: {
-              src: fullSafariFixPath
-            }
-          })
         }
 
         tags.push(...legacyAssets)
diff --git a/packages/@vue/cli-service/package.json b/packages/@vue/cli-service/package.json
index 42ac1247fa..0383b2cc3e 100644
--- a/packages/@vue/cli-service/package.json
+++ b/packages/@vue/cli-service/package.json
@@ -23,6 +23,7 @@
   },
   "homepage": "https://cli.vuejs.org/",
   "dependencies": {
+    "@babel/helper-compilation-targets": "^7.12.16",
     "@soda/friendly-errors-webpack-plugin": "^1.8.0",
     "@soda/get-current-script": "^1.0.2",
     "@types/minimist": "^1.2.0",

From b079973dd7dd8787aa9ee442f28f6c7d13bd908d Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Fri, 9 Apr 2021 16:06:44 +0800
Subject: [PATCH 03/10] feat: modern mode on by default, and `--no-module`
 option

`--no-modern` sounds weird, so I prefer the `--no-module` option.
But `--no-modern` is kept for the convenience of implementation, could
be removed later.
---
 .../@vue/cli-service/__tests__/build.spec.js  |  4 ++--
 .../cli-service/__tests__/modernMode.spec.js  | 13 ++++++----
 .../cli-service/lib/commands/build/index.js   | 24 +++++++++++--------
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/@vue/cli-service/__tests__/build.spec.js b/packages/@vue/cli-service/__tests__/build.spec.js
index c32e8bffa8..ce94962897 100644
--- a/packages/@vue/cli-service/__tests__/build.spec.js
+++ b/packages/@vue/cli-service/__tests__/build.spec.js
@@ -38,8 +38,8 @@ test('build', async () => {
   // expect(index).toMatch(/<link [^>]+app[^>]+\.css" rel="preload" as="style">/)
 
   // should inject scripts
-  expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors\.\w{8}\.js">/)
-  expect(index).toMatch(/<script defer="defer" src="\/js\/app\.\w{8}\.js">/)
+  expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors-legacy\.\w{8}\.js" nomodule>/)
+  expect(index).toMatch(/<script defer="defer" src="\/js\/app-legacy\.\w{8}\.js" nomodule>/)
   // should inject css
   expect(index).toMatch(/<link href="\/css\/app\.\w{8}\.css" rel="stylesheet">/)
 
diff --git a/packages/@vue/cli-service/__tests__/modernMode.spec.js b/packages/@vue/cli-service/__tests__/modernMode.spec.js
index f509b692d4..ebf6b8622a 100644
--- a/packages/@vue/cli-service/__tests__/modernMode.spec.js
+++ b/packages/@vue/cli-service/__tests__/modernMode.spec.js
@@ -12,7 +12,7 @@ let server, browser
 test('modern mode', async () => {
   const project = await create('modern-mode', defaultPreset)
 
-  const { stdout } = await project.run('vue-cli-service build --modern')
+  const { stdout } = await project.run('vue-cli-service build')
   expect(stdout).toMatch('Build complete.')
 
   // assert correct bundle files
@@ -45,7 +45,7 @@ test('modern mode', async () => {
 
   // Test crossorigin="use-credentials"
   await project.write('vue.config.js', `module.exports = { crossorigin: 'use-credentials' }`)
-  const { stdout: stdout2 } = await project.run('vue-cli-service build --modern')
+  const { stdout: stdout2 } = await project.run('vue-cli-service build')
   expect(stdout2).toMatch('Build complete.')
   const index2 = await project.read('dist/index.html')
   // should use <script type="module" crossorigin="use-credentials"> for modern bundle
@@ -82,7 +82,7 @@ test('should not inject the nomodule-fix script if Safari 10 is not targeted', a
   // the default targets already excludes safari 10
   const project = await create('skip-safari-fix', defaultPreset)
 
-  const { stdout } = await project.run('vue-cli-service build --modern')
+  const { stdout } = await project.run('vue-cli-service build')
   expect(stdout).toMatch('Build complete.')
 
   // should contain no inline scripts in the output html
@@ -100,14 +100,14 @@ test('should inject nomodule-fix script when Safari 10 support is required', asy
   pkg.browserslist.push('safari > 10')
   await project.write('package.json', JSON.stringify(pkg, null, 2))
 
-  let { stdout } = await project.run('vue-cli-service build --modern')
+  let { stdout } = await project.run('vue-cli-service build')
   let index = await project.read('dist/index.html')
   // should inject Safari 10 nomodule fix as an inline script
   const { safariFix } = require('../lib/webpack/ModernModePlugin')
   expect(index).toMatch(`<script>${safariFix}</script>`)
 
   // `--no-unsafe-inline` option
-  stdout = (await project.run('vue-cli-service build --modern --no-unsafe-inline')).stdout
+  stdout = (await project.run('vue-cli-service build --no-unsafe-inline')).stdout
   expect(stdout).toMatch('Build complete.')
   // should output a separate safari-nomodule-fix bundle
   const files = await fs.readdir(path.join(project.dir, 'dist/js'))
@@ -117,6 +117,9 @@ test('should inject nomodule-fix script when Safari 10 support is required', asy
   expect(index).not.toMatch(/[^>]\s*<\/script>/)
 })
 
+test.todo('--no-module')
+test.todo('--no-modern as an alias to --no-module')
+
 afterAll(async () => {
   if (browser) {
     await browser.close()
diff --git a/packages/@vue/cli-service/lib/commands/build/index.js b/packages/@vue/cli-service/lib/commands/build/index.js
index d749e7230d..84806e9c4e 100644
--- a/packages/@vue/cli-service/lib/commands/build/index.js
+++ b/packages/@vue/cli-service/lib/commands/build/index.js
@@ -1,6 +1,7 @@
 const defaults = {
   clean: true,
   target: 'app',
+  module: true,
   formats: 'commonjs,umd,umd-min',
   'unsafe-inline': true
 }
@@ -26,7 +27,7 @@ module.exports = (api, options) => {
     options: {
       '--mode': `specify env mode (default: production)`,
       '--dest': `specify output directory (default: ${options.outputDir})`,
-      '--modern': `build app targeting modern browsers with auto fallback`,
+      '--no-module': `build app without generating <script type="module"> chunks for modern browsers`,
       '--no-unsafe-inline': `build app without introducing inline scripts`,
       '--target': `app | lib | wc | wc-async (default: ${defaults.target})`,
       '--inline-vue': 'include the Vue module in the final bundle of library or web component target',
@@ -38,7 +39,8 @@ module.exports = (api, options) => {
       '--report-json': 'generate report.json to help analyze bundle content',
       '--skip-plugins': `comma-separated list of plugin names to skip for this run`,
       '--watch': `watch for changes`,
-      '--stdin': `close when stdin ends`
+      '--stdin': `close when stdin ends`,
+      '--no-modern': `(deprecated) same as --no-module`
     }
   }, async (args, rawArgs) => {
     for (const key in defaults) {
@@ -51,6 +53,16 @@ module.exports = (api, options) => {
       args.entry = args.entry || 'src/App.vue'
     }
 
+    // A trick to quickly introduce the `--no-module` command
+    // without modifying the rest of the code
+    // todo: refactor this later
+    if (args.module != null) {
+      args.modern = args.module
+    } else {
+      // Make --no-modern an alias of --no-module
+      args.module = args.modern
+    }
+
     process.env.VUE_CLI_BUILD_TARGET = args.target
     if (args.modern && args.target === 'app') {
       process.env.VUE_CLI_MODERN_MODE = true
@@ -78,14 +90,6 @@ module.exports = (api, options) => {
       }
       delete process.env.VUE_CLI_MODERN_MODE
     } else {
-      if (args.modern) {
-        const { warn } = require('@vue/cli-shared-utils')
-        warn(
-          `Modern mode only works with default target (app). ` +
-          `For libraries or web components, use the browserslist ` +
-          `config to specify target browsers.`
-        )
-      }
       await build(args, api, options)
     }
     delete process.env.VUE_CLI_BUILD_TARGET

From 7ec5c360739a274f161569d0de74f92f03b8e7df Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Fri, 9 Apr 2021 16:32:05 +0800
Subject: [PATCH 04/10] refactor: eliminate usage of `args.modern`

TODO: shall we rename `--modernBuild` too?
---
 .../cli-service/lib/commands/build/index.js     | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/@vue/cli-service/lib/commands/build/index.js b/packages/@vue/cli-service/lib/commands/build/index.js
index 84806e9c4e..e4ff1d596a 100644
--- a/packages/@vue/cli-service/lib/commands/build/index.js
+++ b/packages/@vue/cli-service/lib/commands/build/index.js
@@ -53,18 +53,13 @@ module.exports = (api, options) => {
       args.entry = args.entry || 'src/App.vue'
     }
 
-    // A trick to quickly introduce the `--no-module` command
-    // without modifying the rest of the code
-    // todo: refactor this later
-    if (args.module != null) {
-      args.modern = args.module
-    } else {
-      // Make --no-modern an alias of --no-module
-      args.module = args.modern
+    // Make --no-modern an alias of --no-module
+    if (args.modern === false) {
+      args.module = false
     }
 
     process.env.VUE_CLI_BUILD_TARGET = args.target
-    if (args.modern && args.target === 'app') {
+    if (args.module && args.target === 'app') {
       process.env.VUE_CLI_MODERN_MODE = true
       if (!process.env.VUE_CLI_MODERN_BUILD) {
         // main-process for legacy build
@@ -114,7 +109,7 @@ async function build (args, api, options) {
   log()
   const mode = api.service.mode
   if (args.target === 'app') {
-    const bundleTag = args.modern
+    const bundleTag = args.module
       ? args.modernBuild
         ? `modern bundle `
         : `legacy bundle `
@@ -136,7 +131,7 @@ async function build (args, api, options) {
   }
 
   const targetDir = api.resolve(options.outputDir)
-  const isLegacyBuild = args.target === 'app' && args.modern && !args.modernBuild
+  const isLegacyBuild = args.target === 'app' && args.module && !args.modernBuild
 
   // resolve raw webpack config
   let webpackConfig

From 1d550684b69191ca3bb184a92bd6c2e0642283fe Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Sat, 10 Apr 2021 00:55:51 +0800
Subject: [PATCH 05/10] fix: fix the issues caused by the renaming from modern
 to module

---
 .../__tests__/transpileDependencies.spec.js   | 36 +++++++++++++++----
 .../@vue/cli-service/__tests__/cors.spec.js   |  4 +--
 .../cli-service/__tests__/multiPage.spec.js   | 22 ++++++------
 .../cli-service/lib/commands/build/index.js   |  8 +----
 .../lib/commands/build/resolveAppConfig.js    |  2 +-
 5 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js b/packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js
index 1c5d6c25c5..6ca50ed01b 100644
--- a/packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js
+++ b/packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js
@@ -13,6 +13,12 @@ async function readVendorFile () {
   return project.read(`dist/js/${filename}`)
 }
 
+async function readLegacyVendorFile () {
+  const files = await fs.readdir(path.join(project.dir, 'dist/js'))
+  const filename = files.find(f => /chunk-vendors-legacy\.[^.]+\.js$/.test(f))
+  return project.read(`dist/js/${filename}`)
+}
+
 beforeAll(async () => {
   project = await create('babel-transpile-deps', defaultPreset)
 
@@ -39,6 +45,8 @@ beforeAll(async () => {
   let $packageJson = await project.read('package.json')
 
   $packageJson = JSON.parse($packageJson)
+  $packageJson.browserslist.push('ie 11') // to ensure arrow function transformation is enabled
+  $packageJson.browserslist.push('safari 11') // to ensure optional chaining transformation is enabled
   $packageJson.dependencies['external-dep'] = '1.0.0'
   $packageJson.dependencies['@scope/external-dep'] = '1.0.0'
   $packageJson = JSON.stringify($packageJson)
@@ -70,7 +78,7 @@ afterAll(async () => {
 
 test('dep from node_modules should not been transpiled by default', async () => {
   await project.run('vue-cli-service build')
-  expect(await readVendorFile()).toMatch('() => "__TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('() => "__TEST__"')
 })
 
 test('dep from node_modules should been transpiled when matched by transpileDependencies', async () => {
@@ -79,9 +87,9 @@ test('dep from node_modules should been transpiled when matched by transpileDepe
     `module.exports = { transpileDependencies: ['external-dep', '@scope/external-dep'] }`
   )
   await project.run('vue-cli-service build')
-  expect(await readVendorFile()).toMatch('return "__TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('return "__TEST__"')
 
-  expect(await readVendorFile()).toMatch('return "__SCOPE_TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('return "__SCOPE_TEST__"')
 })
 
 test('dep from node_modules should been transpiled when transpileDependencies is true', async () => {
@@ -90,9 +98,9 @@ test('dep from node_modules should been transpiled when transpileDependencies is
     `module.exports = { transpileDependencies: true }`
   )
   await project.run('vue-cli-service build')
-  expect(await readVendorFile()).toMatch('return "__TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('return "__TEST__"')
 
-  expect(await readVendorFile()).toMatch('return "__SCOPE_TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('return "__SCOPE_TEST__"')
 })
 
 // https://github.com/vuejs/vue-cli/issues/3057
@@ -104,6 +112,20 @@ test('only transpile package with same name specified in transpileDependencies',
   try {
     await project.run('vue-cli-service build')
   } catch (e) {}
-  expect(await readVendorFile()).toMatch('() => "__TEST__"')
-  expect(await readVendorFile()).toMatch('() => "__SCOPE_TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('() => "__TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('() => "__SCOPE_TEST__"')
+})
+
+test('when transpileDependencies is on, the module build should also include transpiled code', async () => {
+  await project.write(
+    'vue.config.js',
+    `module.exports = { transpileDependencies: true }`
+  )
+  await project.write(
+    'node_modules/external-dep/index.js',
+    `const test = (x) => x?.y?.z;\nexport default test`
+  )
+
+  await project.run('vue-cli-service build')
+  expect(await readVendorFile()).not.toMatch('x?.y?.z')
 })
diff --git a/packages/@vue/cli-service/__tests__/cors.spec.js b/packages/@vue/cli-service/__tests__/cors.spec.js
index 64dfd15f8d..481c39a6a7 100644
--- a/packages/@vue/cli-service/__tests__/cors.spec.js
+++ b/packages/@vue/cli-service/__tests__/cors.spec.js
@@ -30,8 +30,8 @@ test('build', async () => {
   // expect(index).toMatch(/<link [^>]+app[^>]+\.css rel=preload as=style crossorigin>/)
 
   // should apply crossorigin and add integrity to scripts and css
-  expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors\.\w{8}\.js" crossorigin integrity="sha384-.{64}\s?">/)
-  expect(index).toMatch(/<script defer="defer" src="\/js\/app\.\w{8}\.js" crossorigin integrity="sha384-.{64}\s?">/)
+  expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors\.\w{8}\.js" crossorigin integrity="sha384-.{64}\s?" type="module">/)
+  expect(index).toMatch(/<script defer="defer" src="\/js\/app\.\w{8}\.js" crossorigin integrity="sha384-.{64}\s?" type="module">/)
   expect(index).toMatch(/<link href="\/css\/app\.\w{8}\.css" rel="stylesheet" crossorigin integrity="sha384-.{64}\s?">/)
 
   // verify integrity is correct by actually running it
diff --git a/packages/@vue/cli-service/__tests__/multiPage.spec.js b/packages/@vue/cli-service/__tests__/multiPage.spec.js
index 441fe07537..b055a24f85 100644
--- a/packages/@vue/cli-service/__tests__/multiPage.spec.js
+++ b/packages/@vue/cli-service/__tests__/multiPage.spec.js
@@ -110,14 +110,14 @@ test('build w/ multi page', async () => {
   const assertSharedAssets = file => {
     // should split and preload vendor chunk
     // expect(file).toMatch(/<link [^>]*js\/chunk-vendors[^>]*\.js" rel="preload" as="script">/)
-    expect(file).toMatch(/<script [^>]*src="\/js\/chunk-vendors\.\w+\.js">/)
+    expect(file).toMatch(/<script [^>]*src="\/js\/chunk-vendors\.\w+\.js" type="module">/)
   }
 
   const index = await project.read('dist/index.html')
   assertSharedAssets(index)
   // should split and preload common js and css
   // expect(index).toMatch(/<link [^>]*js\/chunk-common[^>]*\.js" rel="preload" as="script">/)
-  expect(index).toMatch(/<script [^>]*src="\/js\/chunk-common\.\w+\.js">/)
+  expect(index).toMatch(/<script [^>]*src="\/js\/chunk-common\.\w+\.js" type="module">/)
   expect(index).toMatch(/<link href="\/css\/chunk-common\.\w+\.css" rel="stylesheet">/)
   // expect(index).toMatch(/<link [^>]*chunk-common[^>]*\.css" rel="preload" as="style">/)
   // should preload correct page file
@@ -128,9 +128,9 @@ test('build w/ multi page', async () => {
   // expect(index).toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css" rel="prefetch">/)
   // expect(index).toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js" rel="prefetch">/)
   // should load correct page js
-  expect(index).toMatch(/<script [^>]*src="\/js\/index\.\w+\.js">/)
-  expect(index).not.toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js">/)
-  expect(index).not.toMatch(/<script [^>]*src="\/js\/bar\.\w+\.js">/)
+  expect(index).toMatch(/<script [^>]*src="\/js\/index\.\w+\.js" type="module">/)
+  expect(index).not.toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js" type="module">/)
+  expect(index).not.toMatch(/<script [^>]*src="\/js\/bar\.\w+\.js" type="module">/)
 
   const foo = await project.read('dist/foo.html')
   assertSharedAssets(foo)
@@ -143,9 +143,9 @@ test('build w/ multi page', async () => {
   // expect(foo).not.toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css" rel="prefetch">/)
   // expect(foo).not.toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js" rel="prefetch">/)
   // should load correct page js
-  expect(foo).not.toMatch(/<script [^>]*src="\/js\/index\.\w+\.js">/)
-  expect(foo).toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js">/)
-  expect(foo).not.toMatch(/<script [^>]*src="\/js\/bar\.\w+\.js">/)
+  expect(foo).not.toMatch(/<script [^>]*src="\/js\/index\.\w+\.js" type="module">/)
+  expect(foo).toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js" type="module">/)
+  expect(foo).not.toMatch(/<script [^>]*src="\/js\/bar\.\w+\.js" type="module">/)
 
   const bar = await project.read('dist/bar.html')
   assertSharedAssets(bar)
@@ -162,9 +162,9 @@ test('build w/ multi page', async () => {
   // expect(bar).toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css" rel="prefetch">/)
   // expect(bar).toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js" rel="prefetch">/)
   // should load correct page js
-  expect(bar).not.toMatch(/<script [^>]*src="\/js\/index\.\w+\.js">/)
-  expect(bar).not.toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js">/)
-  expect(bar).toMatch(/<script [^>]*src="\/js\/bar\.\w+\.js">/)
+  expect(bar).not.toMatch(/<script [^>]*src="\/js\/index\.\w+\.js" type="module">/)
+  expect(bar).not.toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js" type="module">/)
+  expect(bar).toMatch(/<script [^>]*src="\/js\/bar\.\w+\.js" type="module">/)
 
   // assert pages work
   const port = await portfinder.getPortPromise()
diff --git a/packages/@vue/cli-service/lib/commands/build/index.js b/packages/@vue/cli-service/lib/commands/build/index.js
index e4ff1d596a..fcad4278d8 100644
--- a/packages/@vue/cli-service/lib/commands/build/index.js
+++ b/packages/@vue/cli-service/lib/commands/build/index.js
@@ -39,8 +39,7 @@ module.exports = (api, options) => {
       '--report-json': 'generate report.json to help analyze bundle content',
       '--skip-plugins': `comma-separated list of plugin names to skip for this run`,
       '--watch': `watch for changes`,
-      '--stdin': `close when stdin ends`,
-      '--no-modern': `(deprecated) same as --no-module`
+      '--stdin': `close when stdin ends`
     }
   }, async (args, rawArgs) => {
     for (const key in defaults) {
@@ -53,11 +52,6 @@ module.exports = (api, options) => {
       args.entry = args.entry || 'src/App.vue'
     }
 
-    // Make --no-modern an alias of --no-module
-    if (args.modern === false) {
-      args.module = false
-    }
-
     process.env.VUE_CLI_BUILD_TARGET = args.target
     if (args.module && args.target === 'app') {
       process.env.VUE_CLI_MODERN_MODE = true
diff --git a/packages/@vue/cli-service/lib/commands/build/resolveAppConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveAppConfig.js
index d073f6ddd6..b8f518af4c 100644
--- a/packages/@vue/cli-service/lib/commands/build/resolveAppConfig.js
+++ b/packages/@vue/cli-service/lib/commands/build/resolveAppConfig.js
@@ -17,7 +17,7 @@ module.exports = (api, args, options) => {
     })
   }
 
-  if (args.modern) {
+  if (args.module) {
     const ModernModePlugin = require('../../webpack/ModernModePlugin')
     if (!args.modernBuild) {
       // Inject plugin to extract build stats and write to disk

From 871d24734c3eefd3b60697b0e078c6a2c0d729e9 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Tue, 13 Apr 2021 14:58:24 +0800
Subject: [PATCH 06/10] fix: compat with new `--no-module` flag

Don't have the time to fix the tests after changing the default value
of modern mode. So I'll leave that for later.
---
 packages/@vue/cli-ui/ui-defaults/tasks.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/@vue/cli-ui/ui-defaults/tasks.js b/packages/@vue/cli-ui/ui-defaults/tasks.js
index 9e7fe0098f..f349078d84 100644
--- a/packages/@vue/cli-ui/ui-defaults/tasks.js
+++ b/packages/@vue/cli-ui/ui-defaults/tasks.js
@@ -1,5 +1,6 @@
 const path = require('path')
 const fs = require('fs-extra')
+const { loadModule, semver } = require('@vue/cli-shared-utils')
 const { processStats } = require('./utils/stats')
 
 /** @typedef {import('../apollo-server/api/PluginApi')} PluginApi */
@@ -326,7 +327,17 @@ module.exports = api => {
       if (answers.target) args.push('--target', answers.target)
       if (answers.name) args.push('--name', answers.name)
       if (answers.watch) args.push('--watch')
-      if (answers.modern) args.push('--modern')
+
+      // the flag is different between v3/4 and v5 projects
+      const servicePkg = loadModule('@vue/cli-service/package.json', api.getCwd())
+      const isV5Project = servicePkg && semver.satisfies(servicePkg.version, '^5.0.0-0')
+
+      if (answers.modern) {
+        args.push(isV5Project ? '--module' : '--modern')
+      } else {
+        args.push(isV5Project ? '--no-module' : '--no-modern')
+      }
+
       setSharedData('modern-mode', !!answers.modern)
       args.push('--dashboard')
 

From 1e764a15f1fa1005f3139bd97740dc02cd48b5b4 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Tue, 13 Apr 2021 14:59:46 +0800
Subject: [PATCH 07/10] fix: fix blur & focus event of the xterm

---
 packages/@vue/cli-ui/src/components/content/TerminalView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/@vue/cli-ui/src/components/content/TerminalView.vue b/packages/@vue/cli-ui/src/components/content/TerminalView.vue
index 1b170d5568..61c697c81a 100644
--- a/packages/@vue/cli-ui/src/components/content/TerminalView.vue
+++ b/packages/@vue/cli-ui/src/components/content/TerminalView.vue
@@ -173,8 +173,8 @@ export default {
 
       term.open(this.$refs.render)
 
-      term.onBlur(() => this.$emit('blur'))
-      term.onFocus(() => this.$emit('focus'))
+      term.element.addEventListener('blur', () => this.$emit('blur'))
+      term.element.addEventListener('focus', () => this.$emit('focus'))
 
       if (this.autoSize) {
         this.$nextTick(this.fit)

From 2b60277650fed33c2c8c48d1fb9f89e28c0cded5 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Tue, 13 Apr 2021 15:50:37 +0800
Subject: [PATCH 08/10] test: bump timeout

Now that modern mode is on by default, the build time increases too
---
 packages/@vue/cli-service/__tests__/cssPreprocessors.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@vue/cli-service/__tests__/cssPreprocessors.spec.js b/packages/@vue/cli-service/__tests__/cssPreprocessors.spec.js
index 56c63480e2..df2cacb11a 100644
--- a/packages/@vue/cli-service/__tests__/cssPreprocessors.spec.js
+++ b/packages/@vue/cli-service/__tests__/cssPreprocessors.spec.js
@@ -1,4 +1,4 @@
-jest.setTimeout(30000)
+jest.setTimeout(300000)
 
 const create = require('@vue/cli-test-utils/createTestProject')
 const { defaultPreset } = require('@vue/cli/lib/options')

From 5fb28f6dc157b2a1325c0189435731838060b2bb Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Tue, 13 Apr 2021 18:47:15 +0800
Subject: [PATCH 09/10] test: add test for `--no-module`

---
 .../@vue/cli-service/__tests__/modernMode.spec.js  | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/@vue/cli-service/__tests__/modernMode.spec.js b/packages/@vue/cli-service/__tests__/modernMode.spec.js
index ebf6b8622a..1368838db9 100644
--- a/packages/@vue/cli-service/__tests__/modernMode.spec.js
+++ b/packages/@vue/cli-service/__tests__/modernMode.spec.js
@@ -117,8 +117,18 @@ test('should inject nomodule-fix script when Safari 10 support is required', asy
   expect(index).not.toMatch(/[^>]\s*<\/script>/)
 })
 
-test.todo('--no-module')
-test.todo('--no-modern as an alias to --no-module')
+test('--no-module', async () => {
+  const project = await create('no-module', defaultPreset)
+
+  const { stdout } = await project.run('vue-cli-service build --no-module')
+  expect(stdout).toMatch('Build complete.')
+
+  const index = await project.read('dist/index.html')
+  expect(index).not.toMatch('type="module"')
+
+  const files = await fs.readdir(path.join(project.dir, 'dist/js'))
+  expect(files.some(f => /-legacy.js/.test(f))).toBe(false)
+})
 
 afterAll(async () => {
   if (browser) {

From 5c96b0a5ba91ac480a9b125308fbdaad82dc5c0d Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Tue, 13 Apr 2021 23:20:37 +0800
Subject: [PATCH 10/10] test: more thorough test for module build

---
 .../__tests__/transpileDependencies.spec.js               | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js b/packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js
index 6ca50ed01b..21f3d349a0 100644
--- a/packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js
+++ b/packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js
@@ -116,7 +116,7 @@ test('only transpile package with same name specified in transpileDependencies',
   expect(await readLegacyVendorFile()).toMatch('() => "__SCOPE_TEST__"')
 })
 
-test('when transpileDependencies is on, the module build should also include transpiled code', async () => {
+test('when transpileDependencies is on, the module build should also include transpiled code (with a different target)', async () => {
   await project.write(
     'vue.config.js',
     `module.exports = { transpileDependencies: true }`
@@ -127,5 +127,9 @@ test('when transpileDependencies is on, the module build should also include tra
   )
 
   await project.run('vue-cli-service build')
-  expect(await readVendorFile()).not.toMatch('x?.y?.z')
+  const file = await readVendorFile()
+  // module build won't need arrow function transformation
+  expect(file).toMatch('() => "__SCOPE_TEST__"')
+  // but still needs optional chaining transformation
+  expect(file).not.toMatch('x?.y?.z')
 })