本文由 IMWeb 社區(qū) imweb.io 授權(quán)轉(zhuǎn)載自騰訊內(nèi)部 KM 論壇，原作者：kingfo。點擊閱讀原文查看 IMWeb 社區(qū)更多精彩文章。

create-react-app是一個react的cli腳手架+構(gòu)建器，我們可以基于CRA零配置直接上手開發(fā)一個react的SPA應(yīng)用。通過3種方式快速創(chuàng)建一個React SPA應(yīng)用:

npm init with initializer (npm 6.1+)
npx with generator (npm 5.2+)
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

通過添加參數(shù)生成ts支持:

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

當(dāng)然，如果我們是把一個CRA已經(jīng)生成的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除了能幫我們構(gòu)建出一個React的SPA項目(generator)，充當(dāng)腳手架的作用。還能為我們在項目開發(fā)，編譯時進行構(gòu)建，充當(dāng)builder的作用。可以看到生成的項目中的 package.json包含很多命令：

react-scripts start啟動開發(fā)模式下的一個dev-server，并支持代碼修改時的 HotReload
react-scripts build使用webpack進行編譯打包，生成生產(chǎn)模式下的所有腳本，靜態(tài)資源
react-scripts test執(zhí)行所有測試用例，完成對我們每個模塊質(zhì)量的保證

這里，我們針對start這條線進行追蹤，探查CRA實現(xiàn)的原理。入口為 create-react-app/packages/react-scripts/bin/react-scripts.js，這個腳本會在react-scripts中設(shè)置到 package.json的bin字段中去，也就是說這個package可以作為可執(zhí)行的nodejs腳本，通過cli方式在nodejs宿主環(huán)境中。這個入口腳本非常簡單，這里只列出主要的一個 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;
}

可以看到，當(dāng)根據(jù)不同command，會分別resolve不同的js腳本，執(zhí)行不同的任務(wù)，這里我們繼續(xù)看 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';

因為是開發(fā)模式，所以這里把babel，node的環(huán)境變量都設(shè)置為 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;
});

確保其他的環(huán)境變量配置也讀進進程了，所以這里會通過 ../config/env腳本進行初始化:

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

還有一些預(yù)檢查，這部分是作為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云部署時的環(huán)境變量檢查，不在我們考究范圍，也直接跳過。react-dev-utils/browsersHelper是一個瀏覽器支持的幫助utils，因為在 react-scripts v2之后必須要提供一個browser list支持列表，不過我們可以在 package.json中看到，模版項目中已經(jīng)為我們生成了：

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

檢查完devServer端口后，進入我們核心邏輯執(zhí)行，這里的主線還是和我們使用webpack方式幾乎沒什么區(qū)別，首先會通過 configFactory創(chuàng)建出一個webpack的configuration object，然后通過 createDevServerConfig創(chuàng)建出一個devServer的configuration object，然后傳遞webpack config實例化一個webpack compiler實例，傳遞devServer的configuration實例化一個WDS實例開始監(jiān)聽指定的端口，最后通過openBrowser調(diào)用我們的瀏覽器，打開我們的SPA。

其實，整個流程我們看到這里，已經(jīng)結(jié)束了，我們知道WDS和webpack配合，可以進行熱更，file changes watching等功能，我們開發(fā)時，通過修改源代碼，或者樣式文件，會被實時監(jiān)聽，然后webpack中的HWR會實時刷新瀏覽器頁面，可以很方便的進行實時調(diào)試開發(fā)。

const config = configFactory('development');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const appName = require(paths.appPackageJson).name;
const useTypeScript = fs.existsSync(paths.appTsConfig);
const urls = prepareUrls(protocol, HOST, port);
const devSocket = {
  warnings: warnings =>
    devServer.sockWrite(devServer.sockets, 'warnings', warnings),
  errors: errors =>
    devServer.sockWrite(devServer.sockets, 'errors', errors),
};
// Create a webpack compiler that is configured with custom messages.
const compiler = createCompiler({
  appName,
  config,
  devSocket,
  urls,
  useYarn,
  useTypeScript,
  webpack,
});
// Load proxy config
const proxySetting = require(paths.appPackageJson).proxy;
const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
// Serve webpack assets generated by the compiler over a web server.
const serverConfig = createDevServerConfig(
  proxyConfig,
  urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);
// Launch WebpackDevServer.
devServer.listen(port, HOST, err => {
  if (err) {
    return console.log(err);
  }
  if (isInteractive) {
    clearConsole();
  }

  // We used to support resolving modules according to `NODE_PATH`.
  // This now has been deprecated in favor of jsconfig/tsconfig.json
  // This lets you use absolute paths in imports inside large monorepos:
  if (process.env.NODE_PATH) {
    console.log(
      chalk.yellow(
        'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
      )
    );
    console.log();
  }

  console.log(chalk.cyan('Starting the development server...\n'));
  openBrowser(urls.localUrlForBrowser);
});

['SIGINT', 'SIGTERM'].forEach(function(sig) {
  process.on(sig, function() {
    devServer.close();
    process.exit();
  });
});

通過 start命令的追蹤，我們知道CRA最終還是通過WDS和webpack進行開發(fā)監(jiān)聽的，其實 build會比 start更簡單，只是在webpack configuration中會進行優(yōu)化。CRA做到了可以0配置，就能進行react項目的開發(fā)，調(diào)試，打包。

其實是因為CRA把復(fù)雜的webpack config配置封裝起來了，把babel plugins預(yù)設(shè)好了，把開發(fā)時會常用到的一個環(huán)境檢查，polyfill兼容都給開發(fā)者做了，所以使用起來會比我們直接使用webpack，自己進行重復(fù)的配置信息設(shè)置要來的簡單很多。