node.js - reactjs构建系统中发生了什么?
问题描述
您输入create-react-app
并按回车键,瞧!发生了一些神奇的事情,一切都在瞬间完成。但是在其余的开发过程中,您对幕后真正发生的事情缺乏了解。
有没有人对此有所了解?真正发生在哪里?React 编译器在管道中的什么位置,babel 呢,如果我们使用 typescript,我们是不是要替换 babel?当我们使用webpack
时,它是如何将 typescript 与 react 代码结合起来的?
请告诉我构建过程从哪里开始以及在哪里结束。
解决方案
从您的应用程序开始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
可能看起来很吓人,但它是可行的。优先考虑优先考虑或完全忽略的重要事物。不幸的是,没有黄金之路。
推荐阅读
- angular - 在 Angular 中,如何防止用户从当前选项卡更改?
- c - 文件末尾是否有一个终止字符(不是 EOF),它将作为最后一个字符读取?
- list - 取一个值并将其传递给一个结构列表并返回一个具有相应值的列表
- wpf - 具有多种颜色 WPF 的进度条
- excel - 多个单元格中的自动求和
- react-redux - 如何在不使用函数组件的情况下将新值(例如 const)分配给反应类使用状态的新值?
- c++ - 创建数组时出错:表达式必须具有常量值
- html - 没有标签的html中写纯文本是否合适?
- function - 在复制 LabView VI 时寻求帮助 - 更改输入时图形出现错误
- nginx - 大型网站 Walmart、Amazaon、Ticketmaster、Verizon 等不包含 contentSecurityPolicy 是否有原因?