【React】944- create-react-app初探

柔光的暖阳◎ 2023-01-18 06:53 137阅读 0赞

> 本文由 IMWeb 社区 imweb.io 授权转载自腾讯内部 KM 论坛，原作者：kingfo。点击阅读原文查看 IMWeb 社区更多精彩文章。

# create-react-app是一个react的cli脚手架+构建器，我们可以基于CRA零配置直接上手开发一个react的SPA应用。通过3种方式快速创建一个React SPA应用: #

1.  `npm init` with initializer (npm 6.1+)
2.  `npx` with generator (npm 5.2+)
3.  `yarn create` with initializer (yarn 0.25+)

例如我们新建一个叫my-app的SPA:

my-app
    ├── README.md
    ├── node_modules
    ├── package.json
    ├── .gitignore
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   └── manifest.json
    └── src
        ├── App.css
        ├── App.js
        ├── App.test.js
        ├── index.css
        ├── index.js
        ├── logo.svg
        └── serviceWorker.js

通过添加参数生成ts支持:

npx create-react-app my-app --typescript
    # or
    yarn create react-app my-app --typescript

当然，如果我们是把一个CRA已经生成的js项目改成支持ts，可以:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
    # or
    yarn add typescript @types/node @types/react @types/react-dom @types/jest

然后，将.js文件后缀改成.ts重启development server即可。

### CRA还能干嘛 ###

CRA除了能帮我们构建出一个React的SPA项目(generator)，充当脚手架的作用。还能为我们在项目开发，编译时进行构建，充当builder的作用。可以看到生成的项目中的 `package.json`包含很多命令：

1.  `react-scripts start`启动开发模式下的一个dev-server，并支持代码修改时的 `HotReload`
2.  `react-scripts build`使用webpack进行编译打包，生成生产模式下的所有脚本，静态资源
3.  `react-scripts test`执行所有测试用例，完成对我们每个模块质量的保证

这里，我们针对start这条线进行追踪，探查CRA实现的原理。入口为 `create-react-app/packages/react-scripts/bin/react-scripts.js`，这个脚本会在react-scripts中设置到 `package.json`的bin字段中去，也就是说这个package可以作为可执行的nodejs脚本，通过cli方式在nodejs宿主环境中。这个入口脚本非常简单，这里只列出主要的一个 `switch`分支：

switch (script) {
      case 'build':
      case 'eject':
      case 'start':
      case 'test': {
        const result = spawn.sync(
          'node',
          nodeArgs
            .concat(require.resolve('../scripts/' + script))
            .concat(args.slice(scriptIndex + 1)),
          { stdio: 'inherit' }
        );
        if (result.signal) {
          if (result.signal === 'SIGKILL') {
            console.log(
              'The build failed because the process exited too early. ' +
                'This probably means the system ran out of memory or someone called ' +
                '`kill -9` on the process.'
            );
          } else if (result.signal === 'SIGTERM') {
            console.log(
              'The build failed because the process exited too early. ' +
                'Someone might have called `kill` or `killall`, or the system could ' +
                'be shutting down.'
            );
          }
          process.exit(1);
        }
        process.exit(result.status);
        break;
      }
      default:
        console.log('Unknown script "' + script + '".');
        console.log('Perhaps you need to update react-scripts?');
        console.log(
          'See: https://facebook.github.io/create-react-app/docs/updating-to-new-releases'
        );
        break;
    }

可以看到，当根据不同command，会分别resolve不同的js脚本，执行不同的任务，这里我们继续看 `require('../scripts/start')`：

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

因为是开发模式，所以这里把babel，node的环境变量都设置为 `development`，然后是全局错误的捕获，这些都是一个cli脚本通常的处理方式：

// 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;
    });

确保其他的环境变量配置也读进进程了，所以这里会通过 `../config/env`脚本进行初始化:

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

还有一些预检查，这部分是作为eject之前对项目目录的检查，这里因为eject不在我们范围，直接跳过。然后进入到了我们主脚本的依赖列表：

const fs = require('fs');
    const chalk = require('react-dev-utils/chalk');
    const webpack = require('webpack');
    const WebpackDevServer = require('webpack-dev-server');
    const clearConsole = require('react-dev-utils/clearConsole');
    const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
    const {
      choosePort,
      createCompiler,
      prepareProxy,
      prepareUrls,
    } = require('react-dev-utils/WebpackDevServerUtils');
    const openBrowser = require('react-dev-utils/openBrowser');
    const paths = require('../config/paths');
    const configFactory = require('../config/webpack.config');
    const createDevServerConfig = require('../config/webpackDevServer.config');
    const useYarn = fs.existsSync(paths.yarnLockFile);
    const isInteractive = process.stdout.isTTY;

可以看到，主要的依赖还是webpack，WDS，以及自定义的一些devServer的configuration以及webpack的configuration，可以大胆猜想原理和我们平时使用webpack并没有什么不同。

因为 `create-react-appmy-app`之后通过模版生成的项目中入口脚本被放置在src/index.js，而入口html被放置在public/index.html，所以需要对这两个文件进行检查：

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

下面这部分是涉及C9云部署时的环境变量检查，不在我们考究范围，也直接跳过。`react-dev-utils/browsersHelper`是一个浏览器支持的帮助utils，因为在 `react-scripts v2`之后必须要提供一个browser list支持列表，不过我们可以在 `package.json`中看到，模版项目中已经为我们生成了：

"browserslist": {
      "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }

检查完devServer端口后，进入我们核心逻辑执行，这里的主线还是和我们使用webpack方式几乎没什么区别，首先会通过 `configFactory`创建出一个webpack的configuration object，然后通过 `createDevServerConfig`创建出一个devServer的configuration object，然后传递webpack config实例化一个webpack compiler实例，传递devServer的configuration实例化一个WDS实例开始监听指定的端口，最后通过openBrowser调用我们的浏览器，打开我们的SPA。

其实，整个流程我们看到这里，已经结束了，我们知道WDS和webpack配合，可以进行热更，file changes watching等功能，我们开发时，通过修改源代码，或者样式文件，会被实时监听，然后webpack中的HWR会实时刷新浏览器页面，可以很方便的进行实时调试开发。

通过 `start`命令的追踪，我们知道CRA最终还是通过WDS和webpack进行开发监听的，其实 `build`会比 `start`更简单，只是在webpack configuration中会进行优化。CRA做到了可以0配置，就能进行react项目的开发，调试，打包。

其实是因为CRA把复杂的webpack config配置封装起来了，把babel plugins预设好了，把开发时会常用到的一个环境检查，polyfill兼容都给开发者做了，所以使用起来会比我们直接使用webpack，自己进行重复的配置信息设置要来的简单很多。

## 关注我们 ##

IMWeb 团队隶属腾讯公司，是国内最专业的前端团队之一。

我们专注前端领域多年，负责过 QQ 资料、QQ 注册、QQ 群等亿级业务。目前聚焦于在线教育领域，精心打磨 腾讯课堂、企鹅辅导 及 ABCMouse 三大产品。

**社区官网**：

http://imweb.io/

**加入我们**：

https://hr.tencent.com/position\_detail.php?id=45616

![6836fd4135a8d926bfea7fab4fb9d1fa.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![79449698d8933ce086c303bacbfd4c7a.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[6836fd4135a8d926bfea7fab4fb9d1fa.gif]: /images/20221021/2f2aae4873f348b99da371a45cf5bae6.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[79449698d8933ce086c303bacbfd4c7a.gif]: /images/20221021/37cb2dd94a1a4b1a877a908cb2dce24c.png