Question

您输入create-react-app并按Enter键，瞧！发生了一些魔术，所有的事情都在一瞬间完成。但是在其余的开发过程中，您会缺乏对幕后真实情况的了解。

有没有人对此有所说明？真正发生在哪里？ React编译器在管道中的什么位置，而babel呢？如果我们使用打字稿，我们会替换babel吗？当我们使用webpack时，它如何将打字稿与反应代码结合起来？

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

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目录文件-它们通常是由没有直接引用的工具（通过放置约定-结果可能看起来像“魔术”）拾取。

我知道webpack.config.js长超过600行似乎令人生畏，但这是可行的。优先处理重要的事情，使其优先出现或完全忽略。不幸的是，这里没有黄金路。

在reactjs构建系统中的什么地方发生？

1 个答案: