feat: generate vue.config.js with defineConfig wrapper (#6817)

Author: haoqunjiang

packages/@vue/cli/__tests__/Generator.spec.js

@@ -1012,7 +1012,9 @@ test('api: addConfigTransform transform vue warn', async () => {
     extractConfigFiles: true
   })
 
-  expect(fs.readFileSync('/vue.config.js', 'utf-8')).toMatch(`module.exports = {\n  lintOnSave: 'default'\n}`)
+  expect(fs.readFileSync('/vue.config.js', 'utf-8')).toMatch(
+    `const { defineConfig } = require('@vue/cli-service')\nmodule.exports = defineConfig({\n  lintOnSave: 'default'\n})\n`
+  )
   expect(logs.warn.some(([msg]) => {
     return msg.match(/Reserved config transform 'vue'/)
   })).toBe(true)
@@ -1103,7 +1105,9 @@ test('extract config files', async () => {
   })
 
   const js = v => `module.exports = ${stringifyJS(v, null, 2)}`
-  expect(fs.readFileSync('/vue.config.js', 'utf-8')).toMatch(js(configs.vue))
+  expect(fs.readFileSync('/vue.config.js', 'utf-8')).toMatch(
+    `const { defineConfig } = require('@vue/cli-service')\nmodule.exports = defineConfig(${stringifyJS(configs.vue, null, 2)})`
+  )
   expect(fs.readFileSync('/babel.config.js', 'utf-8')).toMatch(js(configs.babel))
   expect(fs.readFileSync('/postcss.config.js', 'utf-8')).toMatch(js(configs.postcss))
   expect(fs.readFileSync('/.eslintrc.js', 'utf-8')).toMatch(js(configs.eslintConfig))

packages/@vue/cli/lib/util/__tests__/extendJSConfig.spec.js

@@ -28,6 +28,32 @@ test(`basic`, () => {
   )
 })
 
+test(`defineConfig`, () => {
+  const value = {
+    foo: true,
+    css: {
+      modules: true
+    }
+  }
+  const source =
+`const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  foo: false,
+  css: {
+    modules: false
+  }
+})`
+  expect(extend(value, source)).toMatch(
+    `const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  foo: true,
+  css: {
+    modules: true
+  }
+})`
+  )
+})
+
 test(`adding new property`, () => {
   const value = {
     foo: true

packages/@vue/cli/lib/util/configTransforms.js

@@ -18,7 +18,7 @@ const transformJS = {
       return null
     }
   },
-  write: ({ value, existing, source }) => {
+  write: ({ value, existing, source, filename }) => {
     if (existing) {
       // We merge only the modified keys
       const changedData = {}
@@ -34,6 +34,11 @@ const transformJS = {
         }
       })
       return extendJSConfig(changedData, source)
+    } else if (filename === 'vue.config.js') {
+      return (
+        `const { defineConfig } = require('@vue/cli-service')\n` +
+        `module.exports = defineConfig(${stringifyJS(value, null, 2)})`
+      )
     } else {
       return `module.exports = ${stringifyJS(value, null, 2)}`
     }

packages/@vue/cli/lib/util/extendJSConfig.js

@@ -14,14 +14,24 @@ module.exports = function extendJSConfig (value, source) {
         node.left.object.name === 'module' &&
         node.left.property.name === 'exports'
       ) {
-        if (node.right.type === 'ObjectExpression') {
-          augmentExports(node.right)
-        } else if (node.right.type === 'Identifier') {
+        let theExports = node.right
+        if (
+          theExports.type === 'CallExpression' &&
+          theExports.callee.type === 'Identifier' &&
+          theExports.callee.name === 'defineConfig'
+        ) {
+          theExports = theExports.arguments[0]
+        }
+
+        if (theExports.type === 'ObjectExpression') {
+          augmentExports(theExports)
+        } else if (theExports.type === 'Identifier') {
           // do a second pass
-          exportsIdentifier = node.right.name
+          exportsIdentifier = theExports.name
         }
         return false
       }
+
       this.traverse(path)
     }
   })