build.js 6.8 KB

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