百度开源创建 React 项目脚手架 reSKRipt

关注

原创最新推荐文章于 2025-09-01 13:55:53 发布 962 阅读 AI 写同款· GEO 优化 ›

限时加码！20+主流AI编程工具免费用购周边加赠Coding Plan Lite，Claude Code、Cursor等即刻畅享，学习进阶更高效！阅读详情

前段时间在公司内部大会，有一位非常厉害的前端同学分享了一个创建 React 项目的脚手架工具 reSKRipt，今天按文档跑了下整个流程，确实不错，如果在团队内部能够结合自己的业务做一个类似脚手架，在项目比较多的情况下，会大大提升研发效率。

去年的时候，我也写了一个脚手架，不过和这个对比了下，我的还有很多不足，仍有很大的提升空间。reSKRipt 考虑了一个新项目该有的「设施」，比如打包配置、单元测试、样式、资源文件、本地调试、部署、代码规范、webworker 使用等，旨在快速（3分钟左右）地创建一个设施齐全的 react 项目。

社区里已经有了 create-react-app，为啥还要造轮子，作者也给出了他的思考（下面是原话）：

社区中的 create-react-app 提供了最基础的开发体验，而 reSKRipt 则在此基础之上加了一些独特的能力和更多的约束，在此例举一些主要的：

更严格地挑选 Babel 插件：我们曾经在 bind operator 标准上吃过不小亏，从此以后便开始避免无脑地使用 stage-0 来进行转义，精细地挑选当前的插件，选择更为成熟且比较确定会持续演进最终进入规范的部分。
默认 CSS Modules：所有的 .less 和 .css 文件均经过 CSS Modules 处理，仅有 .global.{less,css} 被排除在外，这能够更好地控制样式的隔离，更符合一个严谨的工程开发模式。
样式被转化为函数：对于样式文件，在引入后会变成一个函数，比如：import c from './index.less' 后可以使用 c('text', {'size-small': props.small}) 这样的形式生成元素的className，内部基于 classnames 实现。
SVG组件化：可以通过 import {ReactComponent} from './icon.svg' 将 SVG 转化为组件，这与 create-react-app 提供的能力相似，但 reSKRipt 使用了自定义的 loader 来实现这一功能，具备更好的转换性能。
严格的代码检查规则：基于百度内部的编码规范，使用 @ecomfe/eslint-config 和 @ecomfe/stylelint-config 的严格规则做检查，并在此基础上增加了一系列自己的规则，代码检查远比社区更加严格。
自动添加组件名称：所有组件都会自动加上 displayName 属性，无论是以 function、const 还是 export default 定义，都能很好地识别出来并自动的推导最合适的组件名称。
追求更新的框架版本：仅支持 react@17 和 webpack@5，并且我们在未来也将以最快速度跟进框架的最新版本，不断淘汰对旧版本的支持，以此让业务紧密跟随社区的发展。