★ FEATURED ARTICLE 【免费下载链接】rescripts Use the latest react-scripts with custom configurations for Babel, ESLint, TSLint, Webpack,... ∞项目地址https://gitcode.com/gh_mirrors/re/rescripts点击查看免费下载rescripts让你不用 eject 就能深度定制 create-react-appCRA项目的 Webpack、Babel、ESLint 等配置而它的核心武器包rescripts/utilities即 rescripts SDK提供了一组开箱即用的工具函数。本文是一份面向新手的完整 API 清单用通俗语言逐一讲清这 24 个 API 各自能做什么、什么时候用、该怎么组合帮你快速看懂官方 SDK 的每一个函数。一、它是什么为什么你需要 rescripts SDKrescripts/utilities是 rescripts 官方内置的工具函数库随rescripts/cli一起分发也就是说只要你用 rescripts就已经装好了无需单独安装。它解决了一个很常见的痛点CRA 的 Webpack 配置结构复杂、层级很深不同版本还可能变化。手动写config.module.rules[x].use[y]这种路径又脆又难维护稍改一个配置就报错。rescripts SDK 的思路是不要靠死路径而是用选择器去定位和修改配置。你只需描述我要改什么样的节点SDK 帮你自动找到、自动修改。一句话概括它的三大能力查找在任意嵌套对象里按条件找出所有匹配的节点路径。✏️修改批量编辑、替换、删除这些节点。操作 Webpack 插件按插件名增删改查plugins数组里的实例。源码入口packages/utilities/index.js 把paths、selectors、errors三个模块合并导出你在require(rescripts/utilities)时拿到的就是它们的合集。二、快速安装 rescripts SDK如果你已经在用 rescriptsrescripts/utilities已经随 CLI 自带直接使用即可。若是单独使用只需安装开发依赖npm i -D rescripts/utilities使用方式很简单从包中解构出你需要的函数const {getPaths, edit} require(rescripts/utilities)小贴士SDK 里所有方法都做了**柯里化curried**处理这意味着你可以分阶段传参、先绑定一半参数再返回一个新函数写 rescript 时会更简洁。三、API 全景总览24 个函数一图看懂在深入细节前先用一张表把握全局。整个 SDK 按职责分成4 大类、24 个导出成员其中 23 个是函数paths是一个路径常量对象分类作用包含的 API 通用选择器查找 / 修改任意配置节点getPaths、edit、replace、remove Webpack 插件按插件名操作pluginsgetWebpackPlugin、prependWebpackPlugin、appendWebpackPlugin、editWebpackPlugin、replaceWebpackPlugin、removeWebpackPlugin 路径与加载拿到 react-scripts 路径、加载文件paths、load、loadRaw、resolve等 12 个⚠️ 错误处理打印错误并退出error通用选择器源码packages/utilities/selectors/general.jsWebpack 插件源码packages/utilities/selectors/plugins.js接下来我们逐类展开。四、通用选择器 APISDK 的灵魂4 个函数这是 rescripts SDK 里最常用、最强大的一组位于 selectors/general.js。它们围绕先找路径、再按路径操作这一套路工作。1.getPaths(predicate, config)—— 按条件找出所有匹配节点作用递归遍历整个配置对象或任何对象返回一个路径数组指向所有满足你给定判断条件predicate的节点。什么时候用当你想改的节点位置不固定时。例如 CRA 里babel-loader出现在哪一层可能因版本不同而变化用死路径容易踩坑而用条件查找就稳如泰山。返回示例[[module, rules, 2, oneOf, 1]]—— 表示module → rules 第 2 项 → oneOf 第 1 项这条路径。2.edit(transform, paths, config)—— 在找到的节点上应用修改作用接收一个转换函数transform和getPaths得到的路径对每个路径指向的节点执行该函数并返回新配置。一句话记忆getPaths负责找edit负责改。两者是天作之合组合起来能覆盖绝大多数定制需求。3.replace(replacement, paths, config)—— 整体替换指定节点作用和edit类似但你不传转换函数而是直接传一个新值用它整体覆盖指定路径上的节点。什么时候用你已经想好要用什么替换掉原来的内容比如把某个 loader 换成另一个。4.remove(paths, config)—— 删除指定节点作用根据路径把配置上对应位置的节点直接删掉。什么时候用想去掉 CRA 默认配置里你不需要的某一段比如某个多余的 loader 或插件配置项。 这套查找 → 修改的组合是理解整个 rescripts SDK 的钥匙。下面第六节会给一个完整的实战组合。五、Webpack 插件 API精准操控plugins6 个函数这一组位于 selectors/plugins.js专门针对 Webpack 配置里的plugins数组。它们都**按插件的构造函数名constructorName**来定位比如DefinePlugin、ManifestPlugin。函数作用通俗解释getWebpackPlugin(constructorName, config)取出匹配的插件实例找到它prependWebpackPlugin(plugin, config)插入到plugins开头插队到最前面appendWebpackPlugin(plugin, config)追加到plugins末尾排队到最后面editWebpackPlugin(transform, constructorName, config)修改匹配插件的属性改它的配置replaceWebpackPlugin(replacement, constructorName, config)用新插件替换匹配的换掉它removeWebpackPlugin(constructorName, config)从配置中删除匹配插件删掉它典型场景速查新增自己的插件用prependWebpackPlugin或appendWebpackPlugin注意二者区别在于插入位置开头/末尾位置可能影响插件执行顺序。替换官方插件想用更高级的 PWA 方案用replaceWebpackPlugin把ManifestPlugin换成你自己的插件实例即可。移除不想要的插件removeWebpackPlugin(IgnorePlugin, config)一行搞定。给现有插件调参editWebpackPlugin接收一个转换函数在里面直接改插件的属性即可。六、路径与加载 API拿路径、读文件的瑞士军刀12 个成员 paths这一组位于 paths.js是 SDK 里数量最多的一类。它帮你安全地访问 react-scripts 内部路径和项目文件且做了容错处理——文件不存在时返回null而不是崩溃非常适合探索性读取。1.paths—— 一把路径字典paths是一个常量对象把 react-scripts 内部的各种路径重命名成更友好的键名并额外补上了配置文件和脚本路径。常用键名举例键名指向root项目根目录build构建输出目录publicpublic目录srcsrc源码目录packagepackage.json路径reactScriptsreact-scripts 包自身路径webpackConfigWebpack 配置文件路径start/build/test对应脚本路径什么时候用需要定位 react-scripts 的某个文件/目录时直接从paths取比手写相对路径可靠得多。2. 加载load系列 —— 读取项目中的文件这一批函数的共同点是尝试加载某个模块/文件失败则返回null函数从哪加载返回load(p)常规require方式模块loadRaw(p)按 JSON 原文读取并解析JSON 对象loadFromRoot(m)从项目根目录模块loadRawFromRoot(m)从项目根目录读 JSONJSON 对象loadFromNodeModulesOrRoot(m)先node_modules再根目录模块loadFromPackageField(field)package.json的指定字段字段值loadFromReactScriptsNodeModules(m)react-scripts 的node_modules模块什么时候用loadFromPackageField(rescripts)可以优雅地读取package.json里的自定义字段loadFromRoot适合读取项目根下的配置文件。3. 解析resolve系列 —— 只拿路径、不执行与load对应的还有一组resolve函数它们只解析出文件的绝对路径而不会真正加载/执行适合你先知道路径、稍后处理的场景函数行为resolve(p)标准require.resolve拿绝对路径resolveFromRoot(m)从项目根目录解析resolveFromRootOrNodeModules(m)根目录 →node_modules依次尝试resolveFromReactScriptsNodeModules(m)从 react-scripts 的node_modules解析resolveFromReactScriptsNMOrNM(m)node_modules→ react-scriptsnode_modules依次尝试load系列会执行文件resolve系列只返回路径。选择哪个取决于你接下来是要用文件里的值还是只要它的位置。七、错误处理 APIerror1 个函数位于 errors.js是整个 SDK 里最简单的一个error(message)—— 把message打印到控制台并立即终止当前进程process.exit(1)。什么时候用当你的 rescript 遇到无法继续的致命错误时比如找不到必需的插件、配置严重缺失调用它能让进程干净地停下来而不是带着错误配置一路跑下去。注意它不是抛出异常让你捕获而是打印并退出属于最后一道防线。八、实战组合getPathsedit的经典套路单独看每个 API 可能还抽象把查找和修改串起来就豁然开朗了。下面是通用选择器最经典的搭配const {getPaths, edit} require(rescripts/utilities) // 1) 先定义我要找什么样的节点 const isBabelLoader n n n.loader n.loader.includes(babel-loader) // 2) 在 rescript 里先找到所有 babel-loader再逐个改 module.exports config { const paths getPaths(isBabelLoader, config) return edit(node { node.options { ...node.options, /* 你的定制选项 */ } return node }, paths, config) }三步记忆法找用getPaths描述什么样的节点拿到路径数组。改用edit或replace/remove按路径动手。返回把处理后的新config交回去完成这一次配置变换。换插件场景同理用replaceWebpackPlugin或removeWebpackPlugin把条件查找替换成按插件名查找即可思路完全一致。九、新手常见问题FAQQ1我需要单独安装rescripts/utilities吗A通常不用。它已随rescripts/cli一起安装能直接用。只有单独脱离 rescripts 使用 SDK 时才需要npm i -D rescripts/utilities。Q2edit和replace到底该选哪个A需要在原有内容基础上改一点 →edit传转换函数想整个换掉 →replace传新值。Q3为什么我的查找结果位置对不上A优先用getPaths按条件查找而不是写死路径。CRA 不同版本层级会变条件查找能自动适配这也是官方推荐的核心用法。Q4load和resolve有何本质区别Aload会真正加载并执行文件、返回其内容resolve只解析出绝对路径、不执行。要值用前者要路径用后者。Q5找不到插件会怎样A插件相关函数若按名找不到目标SDK 会调用error提示未找到对应构造函数名的插件并终止帮助你快速定位问题而不是默默产出错误配置。十、结语一张表带走整个 rescripts SDKrescripts/utilities用 24 个 API 就覆盖了改 CRA 配置的全部底层需求想精确定位→getPaths想改 / 换 / 删任意节点 →edit、replace、remove想操控 Webpack 插件→getWebpackPlugin等 6 个插件函数想安全读路径和文件→paths及load/resolve系列想兜底报错→error掌握先getPaths找、再edit改这条主线你就拥有了自定义 create-react-app 的完整钥匙——无需 eject无需 fork轻松拿捏每一处配置。祝编码愉快赞分享【免费下载链接】rescripts Use the latest react-scripts with custom configurations for Babel, ESLint, TSLint, Webpack,... ∞项目地址https://gitcode.com/gh_mirrors/re/rescripts点击查看免费下载相关推荐beautiful-mermaid API参考6个核心函数速查清单renderMermaidSVG全参数详解beautiful mermaid API参考6个核心函数速查清单renderMermaidSVG全参数详解 beautiful mermaid 是一个开数据可视化circleImageView4cj 完整 API 参考CircleImageModel 14 个方法全解清单circleImageView4cj 完整 API 参考CircleImageModel 14 个方法全解清单 circleImageView4cj 是一个基图像处理UI组件OpenHarmonyRescripts 项目教程Rescripts 项目教程 1、项目介绍 Rescripts 是一个用于自定义 Create React App CRA 配置的开源工具。它允许开发者在不弹出上一篇stock-scanner流式分析详解Server-Sent Events实时推送技术下一篇NocoBase 工作流 Webhook 集成用外部 HTTP 调用触发工作流与签名验证安全实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
