yarn add react-scripts --dev 这些命令会将react-scripts添加到你的项目依赖中,并允许你运行React应用的相关命令。 3. 检查系统环境变量 虽然对于大多数npm包来说,你通常不需要手动设置环境变量,但如果你确实需要在命令行中直接运行react-scripts命令(这通常不是推荐的做法),你可能需要将其路径添加到你的系统环境...
上面就是 react-dev-uilts/browsersHelper.js 全部的代码。 其中使用到了两个外部的库: 外部引用库 browserslist const browserslist = require('browserslist'); ... const current = browserslist.loadConfig({ path: dir }); // dir = '.' browserslist.loadConfig 是用来获取 browserslist 配置的 loadConfi...
start 是启动开发调试环境的。 可以看到里面有引用和使用webpack-dev-server 7. test.js 顾名思义,这是专门用来执行单元测试的。 8. eject.js 用eject来解构编译脚本。 正是因为有了react-scripts的集成化能力,项目目录才会如此简洁。 但这也限制了灵活性,使得我们很难对其内部做出修改。 而eject可以将react-sc...
进一步深入 react-dev-utils 库，我们专注于 browsersHelper.js 文件。此文件功能丰富，通过返回 promise 对象实现关键功能。它首先检查 package.json 文件中是否包含 browserslist 属性。通过调用 loadConfig 和 findConfig 方法，browsersHelper.js 能准确识别配置信息。loadConfig 方法遍历一系列位置，包括 br...
json文件里面有没有browserslist字段 * 1.如果有直接返回promise * 2.没有的话会在终端询问是否要添加browserslist */ const { checkBrowsers } = require('react-dev-utils/browsersHelper'); checkBrowsers(paths.appPath, isInteractive) .then(() => { /** * detect-port-alt校验当前端口是否被占用 * ...
react-scripts start 命令的核心逻辑也很简单，即创建 compiler 实例，通过 new WebpackDevServer(compiler, serverConfig) 创建本地开发服务器， serverConfig 就是 webpack devServer 配置项。 react-scripts 将这部分配置放到独立的 config/webpackDevServer.config.js 文件中。这里为了简化只开启一个热更新的功能，...
It should be in dependencies but the image on https://create-react-app.dev/ is now out of date, and https://create-react-app.dev/docs/updating-to-new-releases mentions "development dependency" The image is definitely misleading, and the statement above could be misinterpreted 👍 1 luan...
创建好项目只要在config-overrides.js里配置Webpack devServer jest。可以在这里添加自定义的config配置来增加修改loader, plugin, optimization进行配置。webpackMerge使用混入的方式去添加config。 config-overrides.js const path = require('path'); const webpackMerge = require('@/webpack-merge'); ...
升级命令:yarn add react react-domyarn add --dev @types/react @types/react-dom 新特性 变化最大的,就是根节点 root 的创建:使用createRoot。 如果在项目中使用了craco,在运行中,可能会提示craco-less版本过低,需要同步升级到最新版本。 升级命令:yarn add craco-less ...
const immer = require('react-dev-utils/immer').produce; ... appTsConfig = immer(appTsConfig, config => { config.include = ['src']; }); react-dev-utils/immer 只有下面几行代码 'use strict'; var immer = require('immer'); module.exports = immer; ...