Tell user what browser support their application was built with (#3782)

* Warn about browsers during build

* Better message

packages/react-dev-utils/browsersHelper.js

+/**
+ * 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.
+ */
+'use strict';
+
+const browserslist = require('browserslist');
+const chalk = require('chalk');
+const os = require('os');
+
+function checkBrowsers(dir) {
+  const found = browserslist.findConfig(dir);
+
+  if (found == null) {
+    console.log(
+      chalk.red('As of react-scripts >=2 you must specify targeted browsers.') +
+        os.EOL +
+        `Please add a ${chalk.underline(
+          'browserslist'
+        )} key to your ${chalk.bold('package.json')}.`
+    );
+    return null;
+  }
+  return found;
+}
+
+function printBrowsers(dir) {
+  let browsers = checkBrowsers(dir);
+  if (browsers == null) {
+    console.log('Built the bundle with default browser support.');
+    return;
+  }
+  browsers = browsers[process.env.NODE_ENV] || browsers;
+  if (Array.isArray(browsers)) {
+    browsers = browsers.join(', ');
+  }
+  console.log(
+    `Built the bundle with browser support for ${chalk.cyan(browsers)}.`
+  );
+}
+
+module.exports = { checkBrowsers, printBrowsers };

packages/react-dev-utils/package.json

@@ -11,6 +11,7 @@
     "node": ">=6"
   },
   "files": [
+    "browsersHelper.js",
     "checkRequiredFiles.js",
     "clearConsole.js",
     "crashOverlay.js",
@@ -36,8 +37,9 @@
     "webpackHotDevClient.js"
   ],
   "dependencies": {
-    "address": "1.0.3",
     "@babel/code-frame": "7.0.0-beta.37",
+    "address": "1.0.3",
+    "browserslist": "2.11.1",
     "chalk": "2.3.0",
     "cross-spawn": "5.1.0",
     "detect-port-alt": "1.1.5",

packages/react-scripts/config/paths.js

@@ -49,6 +49,7 @@ function getServedPath(appPackageJson) {
 // config after eject: we're in ./config/
 module.exports = {
   dotenv: resolveApp('.env'),
+  appPath: resolveApp('.'),
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),

packages/react-scripts/package.json

@@ -68,5 +68,9 @@
   },
   "optionalDependencies": {
     "fsevents": "1.1.2"
+  },
+  "browserslist": {
+    "development": "last 2 chrome versions",
+    "production": [">1%", "last 4 versions", "Firefox ESR", "not ie < 11"]
   }
 }

packages/react-scripts/scripts/build.js

@@ -40,6 +40,14 @@ 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 { printBrowsers } = require('react-dev-utils/browsersHelper');
+// @remove-on-eject-begin
+// Require browsers to be specified before you eject
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+if (!checkBrowsers(paths.appPath)) {
+  process.exit(1);
+}
+// @remove-on-eject-end
 
 const measureFileSizesBeforeBuild =
   FileSizeReporter.measureFileSizesBeforeBuild;
@@ -107,6 +115,7 @@ measureFileSizesBeforeBuild(paths.appBuild)
         buildFolder,
         useYarn
       );
+      printBrowsers(paths.appPath);
     },
     err => {
       console.log(chalk.red('Failed to compile.\n'));

packages/react-scripts/scripts/start.js

@@ -48,6 +48,13 @@ const createDevServerConfig = require('../config/webpackDevServer.config');
 
 const useYarn = fs.existsSync(paths.yarnLockFile);
 const isInteractive = process.stdout.isTTY;
+// @remove-on-eject-begin
+// Require browsers to be specified before you eject
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+if (!checkBrowsers(paths.appPath)) {
+  process.exit(1);
+}
+// @remove-on-eject-end
 
 // Warn and crash if required files are missing
 if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {