react-create-app项目解析一 build.js

最新推荐文章于 2024-05-18 21:57:13 发布
最新推荐文章于 2024-05-18 21:57:13 发布
阅读量1.6k 收藏 1
点赞数 1
分类专栏： 脚手架 文章标签： react.js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33715850/article/details/123402486
版权 
'use strict';

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  throw err;
});

// Ensure environment variables are read.
require('../config/env');


const path = require('path');
const chalk = require('react-dev-utils/chalk');
const fs = require('fs-extra');
const bfj = require('bfj');
const webpack = require('webpack');
const configFactory = require('../config/webpack.config');
const paths = require('../config/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
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 measureFileSizesBeforeBuild =
  FileSizeReporter.measureFileSizesBeforeBuild;
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
const useYarn = fs.existsSync(paths.yarnLockFile);

// These sizes are pretty large. We'll warn for bundles exceeding them.
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;

const isInteractive = process.stdout.isTTY;

// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
  process.exit(1);
}

const argv = process.argv.slice(2);
const writeStatsJson = argv.indexOf('--stats') !== -1;

// Generate configuration
const config = configFactory('production');

// We require that you explicitly set browsers and do not fall back to
// browserslist defaults.
const { checkBrowsers } = require('react-dev-utils/browsersHelper');
checkBrowsers(paths.appPath, isInteractive)
  .then(() => {
    // First, read the current file sizes in build directory.
    // This lets us display how much they changed later.
    return measureFileSizesBeforeBuild(paths.appBuild);
  })
  .then(previousFileSizes => {
    // Remove all content but keep the directory so that
    // if you're in it, you don't end up in Trash
    fs.emptyDirSync(paths.appBuild);
    // Merge with the public folder
    copyPublicFolder();
    // Start the webpack build
    return build(previousFileSizes);
  })
  .then(
    ({ stats, previousFileSizes, warnings }) => {
      if (warnings.length) {
        console.log(chalk.yellow('Compiled with warnings.\n'));
        console.log(warnings.join('\n\n'));
        console.log(
          '\nSearch for the ' +
            chalk.underline(chalk.yellow('keywords')) +
            ' to learn more about each warning.'
        );
        console.log(
          'To ignore, add ' +
            chalk.cyan('// eslint-disable-next-line') +
            ' to the line before.\n'
        );
      } else {
        console.log(chalk.green('Compiled successfully.\n'));
      }

      console.log('File sizes after gzip:\n');
      printFileSizesAfterBuild(
        stats,
        previousFileSizes,
        paths.appBuild,
        WARN_AFTER_BUNDLE_GZIP_SIZE,
        WARN_AFTER_CHUNK_GZIP_SIZE
      );
      console.log();

      const appPackage = require(paths.appPackageJson);
      const publicUrl = paths.publicUrlOrPath;
      const publicPath = config.output.publicPath;
      const buildFolder = path.relative(process.cwd(), paths.appBuild);
      printHostingInstructions(
        appPackage,
        publicUrl,
        publicPath,
        buildFolder,
        useYarn
      );
    },
    err => {
      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
      if (tscCompileOnError) {
        console.log(
          chalk.yellow(
            'Compiled with the following type errors (you may want to check these before deploying your app):\n'
          )
        );
        printBuildError(err);
      } else {
        console.log(chalk.red('Failed to compile.\n'));
        printBuildError(err);
        process.exit(1);
      }
    }
  )
  .catch(err => {
    if (err && err.message) {
      console.log(err.message);
    }
    process.exit(1);
  });

// Create the production build and print the deployment instructions.
function build(previousFileSizes) {
  console.log('Creating an optimized production build...');

  const compiler = webpack(config);
  return new Promise((resolve, reject) => {
    compiler.run((err, stats) => {
      let messages;
      if (err) {
        if (!err.message) {
          return reject(err);
        }

        let errMessage = err.message;

        // Add additional information for postcss errors
        if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
          errMessage +=
            '\nCompileError: Begins at CSS selector ' +
            err['postcssNode'].selector;
        }

        messages = formatWebpackMessages({
          errors: [errMessage],
          warnings: [],
        });
      } else {
        messages = formatWebpackMessages(
          stats.toJson({ all: false, warnings: true, errors: true })
        );
      }
      if (messages.errors.length) {
        // Only keep the first error. Others are often indicative
        // of the same problem, but confuse the reader with noise.
        if (messages.errors.length > 1) {
          messages.errors.length = 1;
        }
        return reject(new Error(messages.errors.join('\n\n')));
      }
      if (
        process.env.CI &&
        (typeof process.env.CI !== 'string' ||
          process.env.CI.toLowerCase() !== 'false') &&
        messages.warnings.length
      ) {
        console.log(
          chalk.yellow(
            '\nTreating warnings as errors because process.env.CI = true.\n' +
              'Most CI servers set it automatically.\n'
          )
        );
        return reject(new Error(messages.warnings.join('\n\n')));
      }

      const resolveArgs = {
        stats,
        previousFileSizes,
        warnings: messages.warnings,
      };

      if (writeStatsJson) {
        return bfj
          .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
          .then(() => resolve(resolveArgs))
          .catch(error => reject(new Error(error)));
      }

      return resolve(resolveArgs);
    });
  });
}

function copyPublicFolder() {
  fs.copySync(paths.appPublic, paths.appBuild, {
    dereference: true,
    filter: file => file !== paths.appHtml,
  });
}

require('../config/env')

加载config/env，env的解析在另外一篇文章。

const path = require('path');

node处理路径模块

const chalk = require('react-dev-utils/chalk');

打印日志处理

const fs = require('fs-extra');

模块是系统fs模块的扩展，提供了更多便利的 API，并继承了fs模块的 API

const bfj = require('bfj');

处理json数据

const webpack = require('webpack');

webpack对象

const configFactory = require('../config/webpack.config')

获取webpack配置的json对象函数

const paths = require('../config/paths');

相关配置的绝对路径

const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');

确保所有传递的文件都存在。
文件名应该是绝对的。如果未找到文件，则打印警告消息并返回false.

const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');

从 webpack stats对象中提取和美化警告和错误消息。

const printHostingInstructions = require('react-dev-utils/printHostingInstructions');

在项目构建后打印托管说明

const FileSizeReporter = require('react-dev-utils/FileSizeReporter');

measureFileSizesBeforeBuild：

在传递的buildFolder. 保存结果值以在构建后进行比较。

printFileSizesAfterBuild：

在构建之后打印 JS 和 CSS 资产大小，并包含与previousFileSizes之前使用measureFileSizesBeforeBuild(). maxBundleGzipSize并且maxChunkGzipSizemay可以选择指定在主包或块超过指定大小（以字节为单位）时显示警告。

const printBuildError = require('react-dev-utils/printBuildError');

美化一些已知的构建错误。传递一个错误对象以在控制台中记录一个美化的错误消息。

const useYarn = fs.existsSync(paths.yarnLockFile);

以同步的方法检测yarn.lock目录是否存在。如果目录存在 返回 true ，如果目录不存在 返回false

WARN_AFTER_BUNDLE_GZIP_SIZE

BUNDLE_GZIP最大值

WARN_AFTER_CHUNK_GZIP_SIZE

CHUNK_GZIP最大值

const isInteractive = process.stdout.isTTY;

stdout是writeStream类型的对象。

writeStream.isTTY属性是‘tty’模块内类WriteStream的内置应用程序编程接口，用于检查write Stream对象是否为tty实例。对于tty，writeStream，它将始终返回true。

if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {

process.exit(1);

}

public/index.html和src/index.js必须存在，否则退出程序

const argv = process.argv.slice(2);

process.argv第一个是node目录，第二个是node运行目录

 获取额外参数。

const config = configFactory('production');

获取webpack打包配置对象

看看checkBrowsers 检查浏览器方法

checkBrowsers(paths.appPath, isInteractive)

paths.appPath：项目的绝对路径

isInteractive：true

function checkBrowsers(dir, isInteractive, retry = true) {
  const current = browserslist.loadConfig({ path: dir });
  if (current != null) {
    return Promise.resolve(current);
  }

  if (!retry) {
    return Promise.reject(
      new Error(
        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 shouldSetBrowsers(isInteractive).then(shouldSetBrowsers => {
    if (!shouldSetBrowsers) {
      return checkBrowsers(dir, isInteractive, false);
    }

    return (
      pkgUp({ cwd: dir })
        .then(filePath => {
          if (filePath == null) {
            return Promise.reject();
          }
          const pkg = JSON.parse(fs.readFileSync(filePath));
          pkg['browserslist'] = defaultBrowsers;
          fs.writeFileSync(filePath, JSON.stringify(pkg, null, 2) + os.EOL);

          browserslist.clearCaches();
          console.log();
          console.log(
            `${chalk.green('Set target browsers:')} ${chalk.cyan(
              defaultBrowsers.join(', ')
            )}`
          );
          console.log();
        })
        // Swallow any error
        .catch(() => {})
        .then(() => checkBrowsers(dir, isInteractive, false))
    );
  });
}

const current = browserslist.loadConfig({ path: dir }); ：获取package.json中的browserslist配置。

 .then(() => {
    // First, read the current file sizes in build directory.
    // This lets us display how much they changed later.
    return measureFileSizesBeforeBuild(paths.appBuild);
  })

返回打包build绝对路径
.then(previousFileSizes => {
    // Remove all content but keep the directory so that
    // if you're in it, you don't end up in Trash
    fs.emptyDirSync(paths.appBuild);
    // Merge with the public folder
    copyPublicFolder();
    // Start the webpack build
    return build(previousFileSizes);
  })

function copyPublicFolder() {
  fs.copySync(paths.appPublic, paths.appBuild, {
    dereference: true,
    filter: file => file !== paths.appHtml,
  });
}





fs.emptyDirSync(paths.appBuild); //emptyDirSync清空build目录
fs.copySync//同步复制public目录到build目录,且过滤到public目录下的index.html文件

 

执行build方法

function build(previousFileSizes) {
  console.log('Creating an optimized production build...');

  const compiler = webpack(config);
  return new Promise((resolve, reject) => {
    compiler.run((err, stats) => {
      let messages;
      if (err) {
        if (!err.message) {
          return reject(err);
        }

        let errMessage = err.message;

        // Add additional information for postcss errors
        if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
          errMessage +=
            '\nCompileError: Begins at CSS selector ' +
            err['postcssNode'].selector;
        }

        messages = formatWebpackMessages({
          errors: [errMessage],
          warnings: [],
        });
      } else {
        messages = formatWebpackMessages(
          stats.toJson({ all: false, warnings: true, errors: true })
        );
      }
      if (messages.errors.length) {
        // Only keep the first error. Others are often indicative
        // of the same problem, but confuse the reader with noise.
        if (messages.errors.length > 1) {
          messages.errors.length = 1;
        }
        return reject(new Error(messages.errors.join('\n\n')));
      }
      if (
        process.env.CI &&
        (typeof process.env.CI !== 'string' ||
          process.env.CI.toLowerCase() !== 'false') &&
        messages.warnings.length
      ) {
        console.log(
          chalk.yellow(
            '\nTreating warnings as errors because process.env.CI = true.\n' +
              'Most CI servers set it automatically.\n'
          )
        );
        return reject(new Error(messages.warnings.join('\n\n')));
      }

      const resolveArgs = {
        stats,
        previousFileSizes,
        warnings: messages.warnings,
      };

      if (writeStatsJson) {
        return bfj
          .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
          .then(() => resolve(resolveArgs))
          .catch(error => reject(new Error(error)));
      }

      return resolve(resolveArgs);
    });
  });
}

const compiler = webpack(config); 传入webpack配置获取webpack命令执行对象compiler

返回Promise对象，因为外层是一个Promise对象，后面还有then方法。

compiler.run执行完毕，对应的资源也打包好了。

头像为自己开发微信小程序
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react以create-react-app为基础创建项目
11-30
create-react-app是一个js库，使用它能够很方便地建立react项目，免去了建立react项目时配置webpack、调试服务器、运行脚本等麻烦，你只需要使用这个库，便可以一键完成react项目的创建初始化项目 首先，要先利用...
.tex类型文件怎么阅读_另辟蹊径搭建阅读React源码调试环境-支持所有React版本细分文件断点调试
weixin_39637920的博客
11-23 116
若要高效阅读和理解React源码，搭建调试环境是必不可少的一步。而常规方法：使用react.development.js和react-dom.development.js调试，虽然方便，但无法知道每段代码属于哪个细分文件，所以本文将介绍一种取巧的方法搭建便于调试React源码的环境，支持断点调试细分文件，并且此方法理论上可应用于所有Reat版本。最近一个月忙着换工作，这周终于有时间继续写发文章。写...
react-create-app项目解析一 webpack.config.js
qq_33715850的博客
03-14 2380
react-create-app项目解析一 webpack.config.js
react-create-app项目解析一 package.json
qq_33715850的博客
03-09 1155
react-create-app项目解析一 package.json
react-create-app项目解析一 env.js
qq_33715850的博客
03-10 909
react-create-app项目解析一 env.js
create-react-app修改为多页面支持的方法
12-03
新公司前端就我一个，目前个人选型用react...在已经通过create-react-app生成项目的基础下yarn run eject yarn add globby 用于查看html文件 修改config/paths.js //遍历public下目录下的html文件生成arry const glob
create-react-app:Create React App的身份验证示例
05-22
使用Create React App进行Userfront注册的示例Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将...
Stream-Example-Create-React-App:使用Create-React-App CLI构建的示例应用程序
05-18
流示例创建React应用程序使用react-create-app（RCA）构建的示例应用程序这是一个非常基本的示例，旨在与Stream博客上的帖子一起使用。 有关更完整的React示例，请参见项目。 该项目已预先配置了共享的帐户以用于...
create-react-kotlin-app：使用没有构建配置的Kotlin创建React应用
02-03
npx create-react-kotlin-app my-app （ 自带NPM 5.2+及更高版本。参见较旧版本的NPM）。 运行项目： cd my-app/ npm start 然后打开以查看您的应用。 准备部署到生产环境时，请使用npm run build创建一个缩小的...
【React】React的懒加载组件lazy和Suspense
fangyuan__的博客
05-13 252
在一个多路由项目中，页面加载时，所有的路由组件都会被加载如果我们有很多个路由组件，但是用户只点击了几个，这就会有很大的消耗，因此我们需要做懒加载处理，我们点击哪个时，才去加载哪一个而React当然想到了这一点，给我们提供了LazyLoad。
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
最新发布
SongZhengxing_的博客
05-18 180
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
「React」useEffect 与 useLayoutEffect 使用与区别
Constantiny的博客
05-17 622
useEffect 与 useLayoutEffect 是两个 Hooks，前者比较常用，后者在一些场景下也会用到，下面说明两者区别和应用场景。
React18
m0_71534259的博客
05-16 1290
/ 封装自定义Hook// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用// 解决思路: 自定义hook// 可复用的逻辑代码value)// 哪些状态和回调函数需要在其他组件中使用 returnreturn {value,toggle// 封装自定义hook通用思路// 1. 声明一个以use打头的函数// 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）// 3. 把组件中用到的状态或者回调return出去（以对象或者数组）
React 中的组件提升和 Context 的使用方式
hawk2014bj的博客
05-18 250
在项目的开发中，何时使用状态提升，何时使用上下文，我们需要根据具体需求，以及组件的复杂性。当只有少数几个组件需要访问状态，并且这些组件关系密切（如父子或兄弟组件）时使用。保持数据流简单和明确，使得追踪和调试数据流通过组件的方式更加容易。状态提升的好处是简单、方便，但是需要层层传递，如果结构复杂就显得比较混乱。对应使用上下文，可以应用在以下几种场景当状态需要被应用内不同层级的许多组件访问时。用于可以被视为“全局”的数据，如主题、用户设置、身份验证数据等。
React: memo
卡卡西：一个擅长拷贝的前端程序员
05-14 525
React.memo 允许组件在 props 没有改变的情况下跳过重新渲染。
React设置前端代理
m0_71534259的博客
05-18 204
在src下创建setupProxy.js。在配置文件中加入server项。
React@16x（2）核心概念-JSX
qq_40147756的博客
05-18 873
react 核心概念-JSX
速成react篇一：如何创建和嵌套组件，如何添加标签和样式，如何显示数据，如何渲染条件和列表，如何对事件做出响应并更新界面
qq_65537235的博客
05-13 564
第二，使用了es6的导出语法在外组件的时候。这里补充一个知识点，因为react大部分时候都会使用jsx或者tsx进行开发，使用它们的原因是因为他方便，并且严格，方便是可以在js中写dom和js代码，严格是必须用闭合标签，并且你的组件也不能返回多个 JSX 标签。以这个例子，我们要知道，在js中写dom的方式是 return （），在（）里面写dom，如果编写的dom只有一行，则可以在return后面 空格紧跟 不用括号包起来，但是仅限于只有一行代码的情况，如果有多行或者换行如下例子这种，必须包在括号里面。
用create-react-app创建 的react项目中实现多页面应用
03-29
create-react-app 是一个用于快速创建 React 应用程序的命令行工具，它默认创建的是单页面应用。如果需要实现多页面应用，可以按照以下步骤进行操作： 1. 在 src 目录下创建多个页面文件夹，如 page1、page2 等，每...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值