Create bundle stats with new build script

As discussed in facebook#1858, we'd like to make it easy for users to view
bundle stats without ejecting.

This PR adds a new script that, along with building the site for
production, creates a `build-stats.json` file. This file can be
used with tools like Webpack Bundle Analyzer or Webpack Visualizer,
to help the user optimize their bundles.

Conflicts:
	package.json
	packages/react-scripts/package.json

Author: joshwcomeau

Diff for: package.json

@@ -5,6 +5,8 @@
   ],
   "scripts": {
     "build": "cd packages/react-scripts && node bin/react-scripts.js build",
+    "build:with-stats":
+      "cd packages/react-scripts && node scripts/build.js --stats",
     "changelog": "lerna-changelog",
     "create-react-app": "node tasks/cra.js",
     "e2e": "tasks/e2e-simple.sh",

Diff for: packages/react-scripts/bin/react-scripts.js

@@ -18,14 +18,15 @@ process.on('unhandledRejection', err => {
 const spawn = require('react-dev-utils/crossSpawn');
 const args = process.argv.slice(2);
 
-const scriptIndex = args.findIndex(
-  x => x === 'build' || x === 'eject' || x === 'start' || x === 'test'
-);
+const scriptKeys = ['build', 'build:with-stats', 'eject', 'start', 'test'];
+const scriptIndex = args.findIndex(x => scriptKeys.includes(x));
+
 const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
 const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
 
 switch (script) {
   case 'build':
+  case 'build:with-stats':
   case 'eject':
   case 'start':
   case 'test': {

Diff for: packages/react-scripts/package.json

@@ -1,14 +1,14 @@
 {
   "name": "react-scripts",
-  "version": "1.0.17",
+  "version": "1.1.0",
   "description": "Configuration and scripts for Create React App.",
-  "repository": "facebookincubator/create-react-app",
+  "repository": "facebook/create-react-app",
   "license": "MIT",
   "engines": {
     "node": ">=6"
   },
   "bugs": {
-    "url": "https://github.com/facebookincubator/create-react-app/issues"
+    "url": "https://github.com/facebook/create-react-app/issues"
   },
   "files": [
     "bin",
@@ -21,21 +21,22 @@
     "react-scripts": "./bin/react-scripts.js"
   },
   "dependencies": {
-    "@babel/core": "7.0.0-beta.37",
-    "@babel/runtime": "7.0.0-beta.37",
+    "@babel/core": "7.0.0-beta.38",
+    "@babel/runtime": "7.0.0-beta.38",
     "autoprefixer": "7.2.5",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "8.2.1",
-    "babel-jest": "22.0.6",
+    "babel-jest": "22.1.0",
     "babel-loader": "8.0.0-beta.0",
-    "babel-preset-react-app": "^3.1.0",
+    "babel-preset-react-app": "^3.1.1",
+    "bfj": "^5.2.0",
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "2.3.0",
-    "css-loader": "0.28.8",
+    "css-loader": "0.28.9",
     "dotenv": "4.0.0",
     "dotenv-expand": "4.0.1",
     "eslint": "4.15.0",
-    "eslint-config-react-app": "^2.0.1",
+    "eslint-config-react-app": "^2.1.0",
     "eslint-loader": "1.9.0",
     "eslint-plugin-flowtype": "2.41.0",
     "eslint-plugin-import": "2.8.0",
@@ -45,14 +46,16 @@
     "file-loader": "1.1.6",
     "fs-extra": "5.0.0",
     "html-webpack-plugin": "2.30.1",
-    "jest": "22.0.6",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "22.1.2",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.10",
     "promise": "8.0.1",
     "raf": "3.4.0",
-    "react-dev-utils": "^4.2.1",
+    "react-dev-utils": "^5.0.0",
     "style-loader": "0.19.1",
+    "svgr": "1.6.0",
     "sw-precache-webpack-plugin": "0.11.4",
     "thread-loader": "1.1.2",
     "uglifyjs-webpack-plugin": "1.1.6",
@@ -67,6 +70,19 @@
     "react-dom": "^16.0.0"
   },
   "optionalDependencies": {
-    "fsevents": "1.1.2"
+    "fsevents": "1.1.3"
+  },
+  "browserslist": {
+    "development": [
+      "last 2 chrome versions",
+      "last 2 firefox versions",
+      "last 2 edge versions"
+    ],
+    "production": [
+      ">1%",
+      "last 4 versions",
+      "Firefox ESR",
+      "not ie < 11"
+    ]
   }
 }

Diff for: packages/react-scripts/scripts/build.js

@@ -33,6 +33,7 @@ const path = require('path');
 const chalk = require('chalk');
 const fs = require('fs-extra');
 const webpack = require('webpack');
+const bfj = require('bfj');
 const config = require('../config/webpack.config.prod');
 const paths = require('../config/paths');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
@@ -55,6 +56,10 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
   process.exit(1);
 }
 
+// Process CLI arguments
+const argv = process.argv.slice(2);
+const writeStatsJson = argv.indexOf('--stats') !== -1;
+
 // First, read the current file sizes in build directory.
 // This lets us display how much they changed later.
 measureFileSizesBeforeBuild(paths.appBuild)
@@ -148,11 +153,20 @@ function build(previousFileSizes) {
         );
         return reject(new Error(messages.warnings.join('\n\n')));
       }
-      return resolve({
+
+      const resolveArgs = {
         stats,
         previousFileSizes,
         warnings: messages.warnings,
-      });
+      };
+      if (writeStatsJson) {
+        return bfj
+          .write('./build/build-stats.json', stats.toJson())
+          .then(() => resolve(resolveArgs))
+          .catch(error => reject(new Error(error)));
+      }
+
+      return resolve(resolveArgs);
     });
   });
 }