fix(generator): avoid doing redundant write operations (#6011)

Avoid overwriting the file which is not modified when executing `vue add/invoke`
This will reduce the chance of encountering issues like #5939

Author: fangbinwei

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

@@ -933,6 +933,52 @@ test('api: addConfigTransform transform vue warn', async () => {
   })).toBe(true)
 })
 
+test('avoid overwriting files that have not been modified', async () => {
+  const generator = new Generator('/', {
+    plugins: [
+      {
+        id: 'test1',
+        apply: (api, options) => {
+          api.render((files, render) => {
+            files['foo.js'] = render('foo()')
+          })
+        }
+      }
+    ],
+    files: {
+      // skip writing to this file
+      'existFile.js': 'existFile()'
+    }
+  })
+
+  await generator.generate()
+
+  expect(fs.readFileSync('/foo.js', 'utf-8')).toMatch('foo()')
+  expect(fs.existsSync('/existFile.js')).toBe(false)
+})
+
+test('overwrite files that have been modified', async () => {
+  const generator = new Generator('/', {
+    plugins: [
+      {
+        id: 'test1',
+        apply: (api, options) => {
+          api.render((files, render) => {
+            files['existFile.js'] = render('foo()')
+          })
+        }
+      }
+    ],
+    files: {
+      'existFile.js': 'existFile()'
+    }
+  })
+
+  await generator.generate()
+
+  expect(fs.readFileSync('/existFile.js', 'utf-8')).toMatch('foo()')
+})
+
 test('extract config files', async () => {
   const configs = {
     vue: {

packages/@vue/cli/lib/Generator.js

@@ -74,6 +74,24 @@ const ensureEOL = str => {
   return str
 }
 
+/**
+ * Collect created/modified files into set
+ * @param {Record<string,string|Buffer>} files
+ * @param {Set<string>} set
+ */
+const watchFiles = (files, set) => {
+  return new Proxy(files, {
+    set (target, key, value, receiver) {
+      set.add(key)
+      return Reflect.set(target, key, value, receiver)
+    },
+    deleteProperty (target, key) {
+      set.delete(key)
+      return Reflect.deleteProperty(target, key)
+    }
+  })
+}
+
 module.exports = class Generator {
   constructor (context, {
     pkg = {},
@@ -99,7 +117,11 @@ module.exports = class Generator {
     // for conflict resolution
     this.depSources = {}
     // virtual file tree
-    this.files = files
+    this.files = Object.keys(files).length
+      // when execute `vue add/invoke`, only created/modified files are written to disk
+      ? watchFiles(files, this.filesModifyRecord = new Set())
+      // all files need to be written to disk
+      : files
     this.fileMiddlewares = []
     this.postProcessFilesCbs = []
     // exit messages
@@ -177,7 +199,7 @@ module.exports = class Generator {
     this.sortPkg()
     this.files['package.json'] = JSON.stringify(this.pkg, null, 2) + '\n'
     // write/update file tree to disk
-    await writeFileTree(this.context, this.files, initialFiles)
+    await writeFileTree(this.context, this.files, initialFiles, this.filesModifyRecord)
   }
 
   extractConfigFiles (extractAll, checkExisting) {

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

@@ -12,14 +12,22 @@ function deleteRemovedFiles (directory, newFiles, previousFiles) {
   }))
 }
 
-module.exports = async function writeFileTree (dir, files, previousFiles) {
+/**
+ *
+ * @param {string} dir
+ * @param {Record<string,string|Buffer>} files
+ * @param {Record<string,string|Buffer>} [previousFiles]
+ * @param {Set<string>} [include]
+ */
+module.exports = async function writeFileTree (dir, files, previousFiles, include) {
   if (process.env.VUE_CLI_SKIP_WRITE) {
     return
   }
   if (previousFiles) {
     await deleteRemovedFiles(dir, files, previousFiles)
   }
   Object.keys(files).forEach((name) => {
+    if (include && !include.has(name)) return
     const filePath = path.join(dir, name)
     fs.ensureDirSync(path.dirname(filePath))
     fs.writeFileSync(filePath, files[name])