Modularise scripts (#1433)

* Refactor start script into modules

* Move dev server config into config file

* Replace eject file whitelist with a "remove-file-on-eject" flag

* Move utils into scripts folder (for inclusion in ejection)

* Add missed changes

* Pass showInstructions as an argument

* Fix eject bug

* Don't eject babelTransform

Author: djgrant

packages/react-scripts/config/jest/babelTransform.js

@@ -1,3 +1,4 @@
+// @remove-file-on-eject
 /**
  * Copyright (c) 2014-present, Facebook, Inc. All rights reserved.
  *

packages/react-scripts/config/webpackDevServer.config.js

@@ -0,0 +1,51 @@
+var config = require('./webpack.config.dev');
+var paths = require('./paths');
+
+var protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+var host = process.env.HOST || 'localhost';
+
+module.exports = {
+  // Enable gzip compression of generated files.
+  compress: true,
+  // Silence WebpackDevServer's own logs since they're generally not useful.
+  // It will still show compile warnings and errors with this setting.
+  clientLogLevel: 'none',
+  // By default WebpackDevServer serves physical files from current directory
+  // in addition to all the virtual build products that it serves from memory.
+  // This is confusing because those files won’t automatically be available in
+  // production build folder unless we copy them. However, copying the whole
+  // project directory is dangerous because we may expose sensitive files.
+  // Instead, we establish a convention that only files in `public` directory
+  // get served. Our build script will copy `public` into the `build` folder.
+  // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+  // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+  // Note that we only recommend to use `public` folder as an escape hatch
+  // for files like `favicon.ico`, `manifest.json`, and libraries that are
+  // for some reason broken when imported through Webpack. If you just want to
+  // use an image, put it in `src` and `import` it from JavaScript instead.
+  contentBase: paths.appPublic,
+  // By default files from `contentBase` will not trigger a page reload.
+  watchContentBase: true,
+  // Enable hot reloading server. It will provide /sockjs-node/ endpoint
+  // for the WebpackDevServer client so it can learn when the files were
+  // updated. The WebpackDevServer client is included as an entry point
+  // in the Webpack development configuration. Note that only changes
+  // to CSS are currently hot reloaded. JS changes will refresh the browser.
+  hot: true,
+  // It is important to tell WebpackDevServer to use the same "root" path
+  // as we specified in the config. In development, we always serve from /.
+  publicPath: config.output.publicPath,
+  // WebpackDevServer is noisy by default so we emit custom message instead
+  // by listening to the compiler events with `compiler.plugin` calls above.
+  quiet: true,
+  // Reportedly, this avoids CPU overload on some systems.
+  // https://github.com/facebookincubator/create-react-app/issues/293
+  watchOptions: {
+    ignored: /node_modules/
+  },
+  // Enable HTTPS if the HTTPS environment variable is set to 'true'
+  https: protocol === 'https',
+  host: host,
+  overlay: false,
+};

packages/react-scripts/scripts/eject.js

@@ -1,3 +1,4 @@
+// @remove-file-on-eject
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
  * All rights reserved.
@@ -7,13 +8,14 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
-var createJestConfig = require('../utils/createJestConfig');
 var fs = require('fs-extra');
 var path = require('path');
-var paths = require('../config/paths');
-var prompt = require('react-dev-utils/prompt');
 var spawnSync = require('cross-spawn').sync;
 var chalk = require('chalk');
+var prompt = require('react-dev-utils/prompt');
+var paths = require('../config/paths');
+var createJestConfig = require('./utils/createJestConfig');
+
 var green = chalk.green;
 var cyan = chalk.cyan;
 
@@ -45,44 +47,48 @@ prompt(
 
   var folders = [
     'config',
-    path.join('config', 'jest'),
-    'scripts'
+    'config/jest',
+    'scripts',
+    'scripts/utils',
   ];
 
-  var files = [
-    path.join('config', 'env.js'),
-    path.join('config', 'paths.js'),
-    path.join('config', 'polyfills.js'),
-    path.join('config', 'webpack.config.dev.js'),
-    path.join('config', 'webpack.config.prod.js'),
-    path.join('config', 'jest', 'cssTransform.js'),
-    path.join('config', 'jest', 'fileTransform.js'),
-    path.join('scripts', 'build.js'),
-    path.join('scripts', 'start.js'),
-    path.join('scripts', 'test.js')
-  ];
+  // Make shallow array of files paths
+  var files = folders.reduce(function (files, folder) {
+    return files.concat(
+      fs.readdirSync(path.join(ownPath, folder))
+        // set full path
+        .map(file => path.join(ownPath, folder, file))
+        // omit dirs from file list
+        .filter(file => fs.lstatSync(file).isFile())
+    );
+  }, []);
 
   // Ensure that the app folder is clean and we won't override any files
   folders.forEach(verifyAbsent);
   files.forEach(verifyAbsent);
 
-  // Copy the files over
+  console.log();
+  console.log(cyan('Copying files into ' + appPath));
+
   folders.forEach(function(folder) {
     fs.mkdirSync(path.join(appPath, folder))
   });
 
-  console.log();
-  console.log(cyan('Copying files into ' + appPath));
   files.forEach(function(file) {
-    console.log('  Adding ' + cyan(file) + ' to the project');
-    var content = fs
-      .readFileSync(path.join(ownPath, file), 'utf8')
+    var content = fs.readFileSync(file, 'utf8');
+
+    // Skip flagged files
+    if (content.match(/\/\/ @remove-file-on-eject/)) {
+      return;
+    }
+    content = content
       // Remove dead code from .js files on eject
       .replace(/\/\/ @remove-on-eject-begin([\s\S]*?)\/\/ @remove-on-eject-end/mg, '')
       // Remove dead code from .applescript files on eject
       .replace(/-- @remove-on-eject-begin([\s\S]*?)-- @remove-on-eject-end/mg, '')
       .trim() + '\n';
-    fs.writeFileSync(path.join(appPath, file), content);
+    console.log('  Adding ' + cyan(file.replace(ownPath, '')) + ' to the project');
+    fs.writeFileSync(file.replace(ownPath, appPath), content);
   });
   console.log();
 

packages/react-scripts/scripts/init.js

@@ -1,3 +1,4 @@
+// @remove-file-on-eject
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
  * All rights reserved.