refactor: make modern mode a build flag instead of an option

Author: yyx990803

packages/@vue/cli-service/__tests__/modernMode.spec.js

@@ -12,13 +12,7 @@ let server, browser
 test('modern mode', async () => {
   const project = await create('modern-mode', defaultPreset)
 
-  await project.write('vue.config.js', `
-    module.exports = {
-      modernMode: true
-    }
-  `)
-
-  const { stdout } = await project.run('vue-cli-service build')
+  const { stdout } = await project.run('vue-cli-service build --modern')
   expect(stdout).toMatch('Build complete.')
 
   // assert correct bundle files

packages/@vue/cli-service/lib/commands/build/index.js

@@ -24,6 +24,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`,
       '--target': `app | lib | wc | wc-async (default: ${defaults.target})`,
       '--name': `name for lib or web-component mode (default: "name" in package.json or entry filename)`,
       '--no-clean': `do not remove the dist directory before building the project`,
@@ -42,17 +43,20 @@ module.exports = (api, options) => {
       args.entry = args.entry || 'src/App.vue'
     }
 
-    if (options.modernMode && args.target === 'app') {
+    if (args.modern && args.target === 'app') {
+      process.env.VUE_CLI_MODERN_MODE = true
       delete process.env.VUE_CLI_MODERN_BUILD
       await build(Object.assign({}, args, {
-        modern: false
+        modernBuild: false
       }), api, options)
 
       process.env.VUE_CLI_MODERN_BUILD = true
       await build(Object.assign({}, args, {
-        modern: true,
+        modernBuild: true,
         clean: false
       }), api, options)
+
+      delete process.env.VUE_CLI_MODERN_MODE
       delete process.env.VUE_CLI_MODERN_BUILD
     } else {
       return build(args, api, options)
@@ -77,8 +81,8 @@ async function build (args, api, options) {
   log()
   const mode = api.service.mode
   if (args.target === 'app') {
-    const bundleTag = options.modernMode
-      ? args.modern
+    const bundleTag = args.modern
+      ? args.modernBuild
         ? `modern bundle `
         : `legacy bundle `
       : ``
@@ -93,7 +97,7 @@ async function build (args, api, options) {
   }
 
   const targetDir = api.resolve(args.dest || options.outputDir)
-  const isLegacyBuild = args.target === 'app' && options.modernMode && !args.modern
+  const isLegacyBuild = args.target === 'app' && args.modern && !args.modernBuild
 
   // resolve raw webpack config
   process.env.VUE_CLI_BUILD_TARGET = args.target

packages/@vue/cli-service/lib/commands/build/resolveAppConfig.js

@@ -10,10 +10,9 @@ module.exports = (api, args, options) => {
     })
   }
 
-  if (options.modernMode) {
+  if (args.modern) {
     const ModernModePlugin = require('../../webpack/ModernModePlugin')
-    const isModernBuild = !!process.env.VUE_CLI_MODERN_BUILD
-    if (!isModernBuild) {
+    if (!args.modernBuild) {
       // Inject plugin to extract build stats and write to disk
       config
         .plugin('modern-mode-legacy')

packages/@vue/cli-service/lib/config/app.js

@@ -10,7 +10,7 @@ module.exports = (api, options) => {
     }
 
     const isProd = process.env.NODE_ENV === 'production'
-    const isLegacyBundle = options.modernMode && !process.env.VUE_CLI_MODERN_BUILD
+    const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD
 
     // code splitting
     if (isProd) {

packages/@vue/cli-service/lib/config/base.js

@@ -1,9 +1,9 @@
 module.exports = (api, options) => {
   api.chainWebpack(webpackConfig => {
-    const isLegacyBundle = options.modernMode && !process.env.VUE_CLI_MODERN_BUILD
+    const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD
     const resolveLocal = require('../util/resolveLocal')
     const getAssetPath = require('../util/getAssetPath')
-    const inlineLimit = 10000
+    const inlineLimit = 4096
 
     webpackConfig
       .mode('development')

packages/@vue/cli-service/lib/config/prod.js

@@ -1,7 +1,7 @@
 module.exports = (api, options) => {
   api.chainWebpack(webpackConfig => {
     if (process.env.NODE_ENV === 'production') {
-      const isLegacyBundle = options.modernMode && !process.env.VUE_CLI_MODERN_BUILD
+      const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD
       const getAssetPath = require('../util/getAssetPath')
       const filename = getAssetPath(
         options,

packages/@vue/cli-service/lib/options.js

@@ -4,7 +4,6 @@ const schema = createSchema(joi => joi.object({
   baseUrl: joi.string().allow(''),
   outputDir: joi.string(),
   assetsDir: joi.string(),
-  modernMode: joi.boolean(),
   runtimeCompiler: joi.boolean(),
   transpileDependencies: joi.array(),
   productionSourceMap: joi.boolean(),
@@ -55,9 +54,6 @@ exports.defaults = () => ({
   // where to put static assets (js/css/img/font/...)
   assetsDir: '',
 
-  // ship minimally-transpiled ES2015 along with a legacy bundle
-  modernMode: false,
-
   // boolean, use full build?
   runtimeCompiler: false,