Что происходит, когда в Сборке реагирует система? - PullRequest
Новая
       16

Что происходит, когда в Сборке реагирует система?

0 голосов
/ 22 мая 2019

Вы набираете create-react-app и нажимаете ввод и вуаля! Происходит какое-то волшебство, и все настраивается в одно мгновение. Но в остальной части процесса разработки вы страдаете от незнания того, что действительно происходит за кулисами.

Есть ли кто-нибудь, чтобы пролить свет на это? Что на самом деле происходит где? Где находится компилятор React в конвейере, а как насчет babel, и если мы используем машинопись, мы заменим babel? Когда мы используем webpack, как он сочетает машинопись с кодом реагирования?

Скажите, пожалуйста, где начинается процесс сборки и где он заканчивается.

1 Ответ

1 голос
/ 22 мая 2019

Начните с 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 используют определенные настройки веб-пакетов каждый (webpackDevServer.config.js и webpack.config.js, соответственно), поэтому вы должны внимательно их осмотреть.

Кроме того, просматривайте файлы каталога /config - они часто выбираются инструментами без прямых ссылок (в соответствии с соглашениями о размещении - в результате может выглядеть как «волшебство»).

Я понимаю, что длина 600+ строк webpack.config.js может показаться пугающей, но это выполнимо. Расставьте приоритеты для важных вещей, чтобы посмотреть в первую очередь или полностью игнорировать. К сожалению, золотой дороги нет.

...