From cdab96efae2cd6bd9d5829377e30f6f0db2a22a5 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Fri, 5 Nov 2021 15:11:42 +0800 Subject: [PATCH 1/4] feat: generate vue.config.js with `defineConfig` wrapper --- packages/@vue/cli/lib/util/configTransforms.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/@vue/cli/lib/util/configTransforms.js b/packages/@vue/cli/lib/util/configTransforms.js index adf4c08ad5..77cf72f72f 100644 --- a/packages/@vue/cli/lib/util/configTransforms.js +++ b/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 = {} @@ -35,6 +35,12 @@ 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)})` + ) + } return `module.exports = ${stringifyJS(value, null, 2)}` } } From 73895c38dcc081681855cdf9981739e40253a506 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Fri, 5 Nov 2021 15:25:07 +0800 Subject: [PATCH 2/4] refactor: keep the `else` branch concise --- packages/@vue/cli/lib/util/configTransforms.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/@vue/cli/lib/util/configTransforms.js b/packages/@vue/cli/lib/util/configTransforms.js index 77cf72f72f..73aea4e997 100644 --- a/packages/@vue/cli/lib/util/configTransforms.js +++ b/packages/@vue/cli/lib/util/configTransforms.js @@ -34,13 +34,12 @@ 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 { - if (filename === 'vue.config.js') { - return ( - `const { defineConfig } = require('@vue/cli-service')\n` + - `module.exports = defineConfig(${stringifyJS(value, null, 2)})` - ) - } return `module.exports = ${stringifyJS(value, null, 2)}` } } From 40bca0394d6bc4e8432df4c2869dce64aff44a57 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Fri, 5 Nov 2021 16:04:09 +0800 Subject: [PATCH 3/4] feat: support `defineConfig` wrapper in extendJSConfig --- .../lib/util/__tests__/extendJSConfig.spec.js | 26 +++++++++++++++++++ packages/@vue/cli/lib/util/extendJSConfig.js | 18 ++++++++++--- 2 files changed, 40 insertions(+), 4 deletions(-) diff --git a/packages/@vue/cli/lib/util/__tests__/extendJSConfig.spec.js b/packages/@vue/cli/lib/util/__tests__/extendJSConfig.spec.js index 11957b6605..2275e299ac 100644 --- a/packages/@vue/cli/lib/util/__tests__/extendJSConfig.spec.js +++ b/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 diff --git a/packages/@vue/cli/lib/util/extendJSConfig.js b/packages/@vue/cli/lib/util/extendJSConfig.js index 3f14bc23fe..7e088bffd3 100644 --- a/packages/@vue/cli/lib/util/extendJSConfig.js +++ b/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) } }) From dc7bc8674d3065b44b49a74505e7af8e180c0094 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Fri, 5 Nov 2021 16:11:40 +0800 Subject: [PATCH 4/4] test: update Generator tests --- packages/@vue/cli/__tests__/Generator.spec.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/@vue/cli/__tests__/Generator.spec.js b/packages/@vue/cli/__tests__/Generator.spec.js index 0183d9f54e..0f537b046b 100644 --- a/packages/@vue/cli/__tests__/Generator.spec.js +++ b/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))