reactjs构建系统中发生了什么？

Question

您输入create-react-app 并回车，瞧！发生了一些神奇的事情，一切都在瞬间完成。但是在其余的开发过程中，您对幕后真正发生的事情缺乏了解。

有没有人可以解释一下？真正发生在哪里？ React 编译器在管道中的什么位置，babel 呢，如果我们使用 typescript，我们是不是要替换 babel？当我们使用webpack时，它是如何将typescript与react code结合起来的？

请告诉我构建过程从哪里开始以及在哪里结束。

Answer 1

在您的应用程序上以yarn eject 开头，您将看到列出\config 目录和文件的日志；更新了 npm 依赖项；重写脚本；等等。这应该是一个很好的开始。

user@desktop /c/GitHub/walktrhough (master)
$ yarn eject
yarn run v1.15.2
$ react-scripts eject
NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2
018/10/01/create-react-app-v2.html

? Are you sure you want to eject? This action is permanent. Yes
Ejecting...

Copying files into C:\GitHub\walktrhough
  Adding \config\env.js to the project
  Adding \config\modules.js to the project
  Adding \config\paths.js to the project
  Adding \config\pnpTs.js to the project
  Adding \config\webpack.config.js to the project
  Adding \config\webpackDevServer.config.js to the project
  Adding \config\jest\cssTransform.js to the project
  Adding \config\jest\fileTransform.js to the project
  Adding \scripts\build.js to the project
  Adding \scripts\start.js to the project
  Adding \scripts\test.js to the project

Updating the dependencies
  Removing react-scripts from dependencies
  Adding @babel/core to dependencies
  Adding @svgr/webpack to dependencies
  Adding @typescript-eslint/eslint-plugin to dependencies
@typescript-eslint/parser to dependencies
  Adding babel-eslint to dependencies
  Adding babel-jest to dependencies
  Adding babel-loader to dependencies
  Adding babel-plugin-named-asset-import to dependencies
  Adding babel-preset-react-app to dependencies
  Adding camelcase to dependencies
  Adding case-sensitive-paths-webpack-plugin to dependencies
  Adding css-loader to dependencies
  Adding dotenv to dependencies
  Adding dotenv-expand to dependencies
  Adding eslint to dependencies
  Adding eslint-config-react-app to dependencies
  Adding eslint-loader to dependencies
  Adding eslint-plugin-flowtype to dependencies
  Adding eslint-plugin-import to dependencies
  Adding eslint-plugin-jsx-a11y to dependencies
  Adding eslint-plugin-react to dependencies
  Adding eslint-plugin-react-hooks to dependencies
  Adding file-loader to dependencies
  Adding fs-extra to dependencies
  Adding html-webpack-plugin to dependencies
  Adding identity-obj-proxy to dependencies
  Adding is-wsl to dependencies
  Adding jest to dependencies
  Adding jest-environment-jsdom-fourteen to dependencies
  Adding jest-resolve to dependencies
  Adding jest-watch-typeahead to dependencies
  Adding mini-css-extract-plugin to dependencies
  Adding optimize-css-assets-webpack-plugin to dependencies
  Adding pnp-webpack-plugin to dependencies
  Adding postcss-flexbugs-fixes to dependencies
  Adding postcss-loader to dependencies
  Adding postcss-normalize to dependencies
  Adding postcss-preset-env to dependencies
  Adding postcss-safe-parser to dependencies
  Adding react-app-polyfill to dependencies
  Adding react-dev-utils to dependencies
  Adding resolve to dependencies
  Adding sass-loader to dependencies
  Adding semver to dependencies
  Adding style-loader to dependencies
  Adding terser-webpack-plugin to dependencies
  Adding ts-pnp to dependencies
  Adding url-loader to dependencies
  Adding webpack to dependencies
  Adding webpack-dev-server to dependencies
  Adding webpack-manifest-plugin to dependencies
  Adding workbox-webpack-plugin to dependencies

Updating the scripts
  Replacing "react-scripts start" with "node scripts/start.js"
  Replacing "react-scripts build" with "node scripts/build.js"
  Replacing "react-scripts test" with "node scripts/test.js"

Configuring package.json
  Adding Jest configuration
  Adding Babel preset
  Adding ESLint configuration

Running yarn...
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.8: The platform "win32" is incompatible with this module.
info "fsevents@1.2.8" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Ejected successfully!

首先扫描package.json。查看依赖项和脚本（它们现在是存储库的一部分，例如 /scripts/start.js 或 /scripts/build.js）。

start.js 和 build.js 都使用特定的 webpack 设置（分别为 webpackDevServer.config.js 和 webpack.config.js），因此您应该仔细检查它们。

此外，扫描/config 目录文件——它们通常被没有直接引用的工具拾取（通过放置约定——结果可能看起来像“魔法”）。

我知道 600 多行长 webpack.config.js 可能看起来令人生畏，但它是可行的。优先考虑优先考虑或完全忽略的重要事物。不幸的是，没有黄金之路。