build.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. // @remove-on-eject-begin
  2. /**
  3. * Copyright (c) 2015-present, Facebook, Inc.
  4. *
  5. * This source code is licensed under the MIT license found in the
  6. * LICENSE file in the root directory of this source tree.
  7. */
  8. // @remove-on-eject-end
  9. 'use strict';
  10. // Do this as the first thing so that any code reading it knows the right env.
  11. process.env.BABEL_ENV = 'production';
  12. process.env.NODE_ENV = 'production';
  13. // Makes the script crash on unhandled rejections instead of silently
  14. // ignoring them. In the future, promise rejections that are not handled will
  15. // terminate the Node.js process with a non-zero exit code.
  16. process.on('unhandledRejection', err => {
  17. throw err;
  18. });
  19. // Ensure environment variables are read.
  20. require('../config/env');
  21. // @remove-on-eject-begin
  22. // Do the preflight checks (only happens before eject).
  23. const verifyPackageTree = require('./utils/verifyPackageTree');
  24. if (process.env.SKIP_PREFLIGHT_CHECK !== 'true') {
  25. verifyPackageTree();
  26. }
  27. const verifyTypeScriptSetup = require('./utils/verifyTypeScriptSetup');
  28. verifyTypeScriptSetup();
  29. // @remove-on-eject-end
  30. const path = require('path');
  31. const chalk = require('react-dev-utils/chalk');
  32. const fs = require('fs-extra');
  33. const bfj = require('bfj');
  34. const webpack = require('webpack');
  35. const configFactory = require('../config/webpack.config');
  36. const paths = require('../config/paths');
  37. const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
  38. const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
  39. const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
  40. const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
  41. const printBuildError = require('react-dev-utils/printBuildError');
  42. const measureFileSizesBeforeBuild =
  43. FileSizeReporter.measureFileSizesBeforeBuild;
  44. const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
  45. const useYarn = fs.existsSync(paths.yarnLockFile);
  46. // These sizes are pretty large. We'll warn for bundles exceeding them.
  47. const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
  48. const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
  49. const isInteractive = process.stdout.isTTY;
  50. // Warn and crash if required files are missing
  51. if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
  52. process.exit(1);
  53. }
  54. const argv = process.argv.slice(2);
  55. const writeStatsJson = argv.indexOf('--stats') !== -1;
  56. // Generate configuration
  57. const config = configFactory('production');
  58. // We require that you explicitly set browsers and do not fall back to
  59. // browserslist defaults.
  60. const { checkBrowsers } = require('react-dev-utils/browsersHelper');
  61. checkBrowsers(paths.appPath, isInteractive)
  62. .then(() => {
  63. // First, read the current file sizes in build directory.
  64. // This lets us display how much they changed later.
  65. return measureFileSizesBeforeBuild(paths.appBuild);
  66. })
  67. .then(previousFileSizes => {
  68. // Remove all content but keep the directory so that
  69. // if you're in it, you don't end up in Trash
  70. fs.emptyDirSync(paths.appBuild);
  71. // Merge with the public folder
  72. copyPublicFolder();
  73. // Start the webpack build
  74. return build(previousFileSizes);
  75. })
  76. .then(
  77. ({ stats, previousFileSizes, warnings }) => {
  78. if (warnings.length) {
  79. console.log(chalk.yellow('Compiled with warnings.\n'));
  80. console.log(warnings.join('\n\n'));
  81. console.log(
  82. '\nSearch for the ' +
  83. chalk.underline(chalk.yellow('keywords')) +
  84. ' to learn more about each warning.'
  85. );
  86. console.log(
  87. 'To ignore, add ' +
  88. chalk.cyan('// eslint-disable-next-line') +
  89. ' to the line before.\n'
  90. );
  91. } else {
  92. console.log(chalk.green('Compiled successfully.\n'));
  93. }
  94. console.log('File sizes after gzip:\n');
  95. printFileSizesAfterBuild(
  96. stats,
  97. previousFileSizes,
  98. paths.appBuild,
  99. WARN_AFTER_BUNDLE_GZIP_SIZE,
  100. WARN_AFTER_CHUNK_GZIP_SIZE
  101. );
  102. console.log();
  103. const appPackage = require(paths.appPackageJson);
  104. const publicUrl = paths.publicUrlOrPath;
  105. const publicPath = config.output.publicPath;
  106. const buildFolder = path.relative(process.cwd(), paths.appBuild);
  107. printHostingInstructions(
  108. appPackage,
  109. publicUrl,
  110. publicPath,
  111. buildFolder,
  112. useYarn
  113. );
  114. },
  115. err => {
  116. const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
  117. if (tscCompileOnError) {
  118. console.log(
  119. chalk.yellow(
  120. 'Compiled with the following type errors (you may want to check these before deploying your app):\n'
  121. )
  122. );
  123. printBuildError(err);
  124. } else {
  125. console.log(chalk.red('Failed to compile.\n'));
  126. printBuildError(err);
  127. process.exit(1);
  128. }
  129. }
  130. )
  131. .catch(err => {
  132. if (err && err.message) {
  133. console.log(err.message);
  134. }
  135. process.exit(1);
  136. });
  137. // Create the production build and print the deployment instructions.
  138. function build(previousFileSizes) {
  139. console.log('Creating an optimized production build...');
  140. const compiler = webpack(config);
  141. return new Promise((resolve, reject) => {
  142. compiler.run((err, stats) => {
  143. let messages;
  144. if (err) {
  145. if (!err.message) {
  146. return reject(err);
  147. }
  148. let errMessage = err.message;
  149. // Add additional information for postcss errors
  150. if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
  151. errMessage +=
  152. '\nCompileError: Begins at CSS selector ' +
  153. err['postcssNode'].selector;
  154. }
  155. messages = formatWebpackMessages({
  156. errors: [errMessage],
  157. warnings: [],
  158. });
  159. } else {
  160. messages = formatWebpackMessages(
  161. stats.toJson({ all: false, warnings: true, errors: true })
  162. );
  163. }
  164. if (messages.errors.length) {
  165. // Only keep the first error. Others are often indicative
  166. // of the same problem, but confuse the reader with noise.
  167. if (messages.errors.length > 1) {
  168. messages.errors.length = 1;
  169. }
  170. return reject(new Error(messages.errors.join('\n\n')));
  171. }
  172. if (
  173. process.env.CI &&
  174. (typeof process.env.CI !== 'string' ||
  175. process.env.CI.toLowerCase() !== 'false') &&
  176. messages.warnings.length
  177. ) {
  178. console.log(
  179. chalk.yellow(
  180. '\nTreating warnings as errors because process.env.CI = true.\n' +
  181. 'Most CI servers set it automatically.\n'
  182. )
  183. );
  184. return reject(new Error(messages.warnings.join('\n\n')));
  185. }
  186. const resolveArgs = {
  187. stats,
  188. previousFileSizes,
  189. warnings: messages.warnings,
  190. };
  191. if (writeStatsJson) {
  192. return bfj
  193. .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
  194. .then(() => resolve(resolveArgs))
  195. .catch(error => reject(new Error(error)));
  196. }
  197. return resolve(resolveArgs);
  198. });
  199. });
  200. }
  201. function copyPublicFolder() {
  202. fs.copySync(paths.appPublic, paths.appBuild, {
  203. dereference: true,
  204. filter: file => file !== paths.appHtml,
  205. });
  206. }