add clean command and clean only generated files

Author: KurtGokhan

bin/react-unity-scripts.js

@@ -24,12 +24,13 @@ const scriptIndex = args.findIndex(
     x === 'eject' ||
     x === 'start' ||
     x === 'test' ||
+    x === 'clean' ||
     x === 'lint'
 );
 const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
 const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
 
-if (['build', 'eject', 'start', 'test', 'lint'].includes(script)) {
+if (['build', 'eject', 'start', 'test', 'clean', 'lint'].includes(script)) {
   const result = spawn.sync(
     process.execPath,
     nodeArgs

config/paths.js

@@ -30,6 +30,7 @@ const publicUrlOrPath = getPublicUrlOrPath(
 );
 
 const buildPath = process.env.BUILD_PATH || '../Assets/Resources/react';
+const manifestPath = path.join(buildPath, 'asset-manifest.json');
 
 const moduleFileExtensions = [
   'web.mjs',
@@ -63,6 +64,7 @@ module.exports = {
   dotenv: resolveApp('.env'),
   appPath: resolveApp('.'),
   appBuild: resolveApp(buildPath),
+  appManifest: resolveApp(manifestPath),
   appPublic: resolveApp('public'),
   appPublicAlt: resolveApp('previewer'),
   appHtml: resolveApp('public/index.html'),
@@ -90,6 +92,7 @@ module.exports = {
   dotenv: resolveApp('.env'),
   appPath: resolveApp('.'),
   appBuild: resolveApp(buildPath),
+  appManifest: resolveApp(manifestPath),
   appPublic: resolveApp('public'),
   appPublicAlt: resolveApp('previewer'),
   appHtml: resolveApp('public/index.html'),
@@ -130,6 +133,7 @@ if (
     dotenv: resolveOwn(`${templatePath}/.env`),
     appPath: resolveApp('.'),
     appBuild: resolveOwn(path.join('../..', buildPath)),
+    appManifest: resolveOwn(path.join('../..', manifestPath)),
     appPublic: resolveOwn(`${templatePath}/public`),
     appPreviewer: resolveOwn(`${templatePath}/previewer`),
     appHtml: resolveOwn(`${templatePath}/public/index.html`),

package.json

@@ -95,7 +95,7 @@
     "terser-webpack-plugin": "^5.3.1",
     "url-loader": "^4.1.1",
     "webpack": "^5.72.0",
-    "webpack-dev-server": "^4.8.1",
+    "webpack-dev-server": "^4.9.0",
     "webpack-manifest-plugin": "^5.0.0"
   },
   "devDependencies": {

scripts/build.js

@@ -31,14 +31,13 @@ const configFactory = require('../config/webpack.config');
 const paths = require('../config/paths');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
-const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 const printBuildError = require('react-dev-utils/printBuildError');
+const { cleanBuildDirectory } = require('./utils/cleanBuildDirectory');
 
 const measureFileSizesBeforeBuild =
   FileSizeReporter.measureFileSizesBeforeBuild;
 const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
-const useYarn = fs.existsSync(paths.yarnLockFile);
 
 // These sizes are pretty large. We'll warn for bundles exceeding them.
 const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
@@ -67,9 +66,7 @@ checkBrowsers(paths.appPath, isInteractive)
     return measureFileSizesBeforeBuild(paths.appBuild);
   })
   .then(previousFileSizes => {
-    // Remove all content but keep the directory so that
-    // if you're in it, you don't end up in Trash
-    fs.emptyDirSync(paths.appBuild);
+    cleanBuildDirectory();
     // Merge with the public folder
     copyPublicFolder();
     // Start the webpack build
@@ -104,17 +101,8 @@ checkBrowsers(paths.appPath, isInteractive)
       );
       console.log();
 
-      const appPackage = require(paths.appPackageJson);
-      const publicUrl = paths.publicUrlOrPath;
-      const publicPath = config.output.publicPath;
       const buildFolder = path.relative(process.cwd(), paths.appBuild);
-      printHostingInstructions(
-        appPackage,
-        publicUrl,
-        publicPath,
-        buildFolder,
-        useYarn
-      );
+      console.log(`The ${chalk.blue(buildFolder)} folder is ready to be used in ReactUnity.`);
     },
     err => {
       const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';

scripts/clean.js

@@ -0,0 +1,34 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const path = require('path');
+const chalk = require('react-dev-utils/chalk');
+const paths = require('../config/paths');
+const { cleanBuildDirectory } = require('./utils/cleanBuildDirectory');
+
+Promise.resolve().then(() => {
+  const buildFolder = path.relative(process.cwd(), paths.appBuild);
+  console.log(`Cleaning build directory at ${chalk.blue(buildFolder)}`);
+  cleanBuildDirectory();
+});

scripts/utils/cleanBuildDirectory.js

@@ -0,0 +1,76 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+const path = require('path');
+const fs = require('fs-extra');
+const paths = require('../../config/paths');
+
+function cleanBuildDirectory() {
+  try {
+    if (fs.existsSync(paths.appManifest)) {
+      // Clean only the files inside the asset-manifest so that we avoid cleaning files belonging to user
+      const manifestContent = fs.readFileSync(paths.appManifest, 'utf8');
+      const manifest = JSON.parse(manifestContent);
+
+      const keys = Object.keys(manifest.files);
+
+      for (const key of keys) {
+        const file = manifest.files[key];
+        const filePath = path.join(paths.appBuild, file);
+        const metaFile = filePath + '.meta';
+
+        fs.removeSync(filePath);
+        fs.removeSync(metaFile);
+      }
+
+      const manifestMeta = paths.appManifest + '.meta';
+      fs.removeSync(paths.appManifest);
+      fs.removeSync(manifestMeta);
+
+      cleanEmptyFoldersRecursively(null, paths.appBuild, true);
+
+      return;
+    }
+  } catch (err) { }
+
+  console.log('Skipped clearing output directory because asset manifest was not found. Please clean the output directory manually if necessary.');
+}
+
+
+function cleanEmptyFoldersRecursively(parent, folder, skipFirst) {
+  if (!fs.existsSync(folder)) return;
+  var isDir = fs.statSync(folder).isDirectory();
+  if (!isDir) return;
+
+  var files = fs.readdirSync(folder);
+  if (files.length > 0) {
+    files.forEach(function (file) {
+      var fullPath = path.join(folder, file);
+      cleanEmptyFoldersRecursively(folder, fullPath, false);
+    });
+
+    // re-evaluate files; after deleting subfolder
+    // we may have parent folder empty now
+    files = fs.readdirSync(folder);
+  }
+
+  if (!skipFirst && files.length == 0) {
+    fs.rmdirSync(folder);
+
+    if (parent) {
+      const folderName = path.basename(folder);
+      const dirMeta = path.join(parent, folderName + '.meta');
+      fs.removeSync(dirMeta);
+    }
+    return;
+  }
+}
+
+module.exports.cleanBuildDirectory = cleanBuildDirectory;