/reskript

一个帮助开发React应用的全功能命令行套件

Primary LanguageTypeScriptMIT LicenseMIT

reSKRipt

在线文档:https://ecomfe.github.io/reskript

reSKRipt是一套基于ReactAnt Design的应用开发的命令行工具套件,它整合代码检查、单元测试、构建、代码转义、本地调试等一系列功能,意图做到业务开发无需关心工具选型的上的。

为什么自研

社区有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属性,无论是以functionconst还是export default定义,都能很好地识别出来并自动的推导最合适的组件名称。
  • 追求更新的框架版本:仅支持react@17webpack@5,并且我们在未来也将最快速度跟进框架的最新版本,会不断淘汰对旧版本的支持,以此让业务系统紧密跟随社区的发展。

因此,使用reSKRipt可能会一定程度上约束你的开发模式,它并不一定适用于所有的应用,但我们有自信在开发模式契合地情况下为你带去大幅度的效率的提升。

关于版本管理

所有的包始终使用同一个版本,由lerna进行管理。

我们会在发布版本的时候使用--force-publish参数,这意味着即便有一个包没有任何的改动,也会跟随发布新的版本。这样做的好处是能很好地处理各包之间错综复杂的依赖关系,避免某个包被重复引入多个版本。

如果你需要升级包,在知道最新版本号的前提下,大可以在package.json把所有@reskript/开头的包的版本统一修改,再运行npm installyarn来更新。

安装

要求系统安装node >= 14.0.0版本。

一些基本上你一定会需要的依赖,任何场景都请先安装上:

npm install --save-dev eslint stylelint typescript webpack

reSKRipt由多个包组成,你可以按照下面描述的不同场景选择性安装:

我想用webpack构建我的应用。

npm install --save-dev @reskript/cli @reskript/cli-build

skr build

我想用webpack-dev-server调试我的应用。

npm install --save-dev @reskript/cli @reskript/cli-dev

skr dev

我想基于已有的webpack配置自己定义构建。

npm install --save-dev @reskript/config-webpack

我想检查我的代码规范。

npm install --save-dev @reskript/cli @reskript/cli-lint

skr lint

我直接使用eslint、通过vscode的eslint插件检查代码,但想使用已有的规则配置。

npm install --save-dev @reskript/config-lint

我想用jest进行单元测试。

npm install --save-dev @reskript/cli @reskript/cli-test

skr test

我想基于已有的jest配置进一步定制我的单元测试。

npm install --save-dev @reskript/config-jest