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)
  }
  })