通常,react-scripts是作为Create React App的一部分自动安装的。但如果你想单独安装它,可以使用以下命令: bash npm install react-scripts --save-dev 或者如果你更喜欢使用yarn: bash yarn add react-scripts --dev 等待安装完成并检查安装是否成功: 安装过程中,npm或yarn会下载并安装react-scripts及其依赖项。
react-scripts start 命令的核心逻辑也很简单，即创建 compiler 实例，通过 new WebpackDevServer(compiler, serverConfig) 创建本地开发服务器， serverConfig 就是 webpack devServer 配置项。 react-scripts 将这部分配置放到独立的 config/webpackDevServer.config.js 文件中。这里为了简化只开启一个热更新的功能，...
进一步深入 react-dev-utils 库，我们专注于 browsersHelper.js 文件。此文件功能丰富，通过返回 promise 对象实现关键功能。它首先检查 package.json 文件中是否包含 browserslist 属性。通过调用 loadConfig 和 findConfig 方法，browsersHelper.js 能准确识别配置信息。loadConfig 方法遍历一系列位置，包括 br...
start 是启动开发调试环境的。 可以看到里面有引用和使用webpack-dev-server 7. test.js 顾名思义,这是专门用来执行单元测试的。 8. eject.js 用eject来解构编译脚本。 正是因为有了react-scripts的集成化能力,项目目录才会如此简洁。 但这也限制了灵活性,使得我们很难对其内部做出修改。 而eject可以将react-sc...
// 跨平台的spawn const spawn = require('react-dev-utils/crossSpawn'); // 获取构建命令参数 如start、build、test、eject const args = process.argv.slice(2); const scriptIndex = args.findIndex( x => x === 'build' || x === 'eject' || x === 'start' || x === 'test' ); ...
上面就是 react-dev-uilts/browsersHelper.js 全部的代码。 其中使用到了两个外部的库: 外部引用库 browserslist const browserslist = require('browserslist'); ... const current = browserslist.loadConfig({ path: dir }); // dir = '.' browserslist.loadConfig 是用来获取 browserslist 配置的 loadConfi...
创建好项目只要在config-overrides.js里配置Webpack devServer jest。可以在这里添加自定义的config配置来增加修改loader, plugin, optimization进行配置。webpackMerge使用混入的方式去添加config。 config-overrides.js AI检测代码解析 const path = require('path'); ...
你需要的依赖,和在配置文件中编写的配置代码,react-scripts 都帮你写了,比如:react-scripts帮你自动下载需要的 webpack-dev-server 依赖,然后react-scripts自己写了一个nodejs服务端的脚本代码 start.js来 实例化 WebpackDevServer ,并且运行启动了一个使用 express 的Http服务器,现在你只需要专心写src源代码就...
devServer.listen(port, HOST, err => { if (err) { return console.log(err); } if (isInteractive) { clearConsole(); } } // build 生产环境 const config = configFactory('production'); // 生产环境构建配置 // coding... function build(previousFileSizes) { ...
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; ...