• Stars
    star
    210
  • Rank 187,585 (Top 4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 4 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

基于 React 与 Ant Design 开发的命令行工具套件

本文档对应6.x版本,如果你使用其它版本,请参考升级手册进行升级。

6.x版本对应antd 5.x,如果你使用4.x版本,请参考第三方库优化进行配置。

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

快速开始

mkdir my-app
npx @reskript/init@latest my-app
cd my-app
npm start

进一步的使用欢迎参考使用文档

为什么自研

社区中的 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?react' 将 SVG 转化为组件,这与 create-react-app 提供的能力相似,但 reSKRipt 使用了自定义的 loader 来实现这一功能,具备更好的转换性能。
  • 严格的代码检查规则:基于百度内部的编码规范,使用 @ecomfe/eslint-config@ecomfe/stylelint-config 的严格规则做检查,并在此基础上增加了一系列自己的规则,代码检查远比社区更加严格。
  • 自动添加组件名称:所有组件都会自动加上 displayName 属性,无论是以 function、const 还是 export default 定义,都能很好地识别出来并自动的推导最合适的组件名称。
  • 追求更新的框架版本:仅支持 react@17 和 webpack@5,并且我们在未来也将以最快速度跟进框架的最新版本,不断淘汰对旧版本的支持,以此让业务紧密跟随社区的发展。
  • 更低成本地升级工具:统一封装Vite、Webpack等底层工具链,便于社区向前走时及时的跟上切换。

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

版本管理

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

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

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

安装

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

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

npm install -D eslint stylelint typescript webpack

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

  • 我想用 webpack 构建我的应用
npm install -D -E @reskript/cli @reskript/cli-build

skr build
  • 我想用 webpack-dev-server 调试我的应用
npm install -D -E @reskript/cli @reskript/cli-dev

skr dev
  • 我想基于已有的 webpack 配置自己定义构建
npm install -D -E @reskript/config-webpack
  • 我想检查我的代码规范
npm install -D -E @reskript/cli @reskript/cli-lint

skr lint
  • 我直接使用 eslint、通过 vscode 的 eslint 插件检查代码,但想使用已有的规则配置
npm install -D -E @reskript/config-lint
  • 我想用jest 进行单元测试
npm install -D -E @reskript/cli @reskript/cli-test

skr test
  • 我想基于已有的 jest 配置进一步定制我的单元测试
npm install -D -E @reskript/config-jest

More Repositories

1

vue-echarts

Vue.js component for Apache ECharts™.
JavaScript
9,615
star
2

echarts-for-weixin

基于 Apache ECharts 的微信小程序图表库
JavaScript
6,880
star
3

zrender

A lightweight graphic library providing 2d draw for Apache ECharts
TypeScript
5,816
star
4

fontmin

Minify font seamlessly
JavaScript
5,545
star
5

spec

This repository contains the specifications.
4,595
star
6

echarts-gl

Extension pack for Apache ECharts, providing globe visualization and 3D plots.
JavaScript
2,554
star
7

echarts-wordcloud

Word Cloud extension based on Apache ECharts and wordcloud2.js
JavaScript
1,592
star
8

echarts-liquidfill

Liquid Fill Chart for Apache ECharts
JavaScript
1,407
star
9

fonteditor

在线字体编辑器
JavaScript
1,297
star
10

awesome-echarts

Awesome list of Apache ECharts
1,269
star
11

veui

Enterprise UI for Vue.js.
JavaScript
1,057
star
12

esl

enterprise standard loader
JavaScript
834
star
13

react-hooks

Collection of react hooks
TypeScript
799
star
14

fontmin-app

fontmin as an OS X, Linux and Windows app
HTML
665
star
15

fecs

Front End Code Style Suite
JavaScript
643
star
16

echarts-stat

Statistics tool for Apache ECharts
HTML
570
star
17

edp

ecomfe develop platform
JavaScript
546
star
18

etpl

ETPL是一个强复用、灵活、高性能的JavaScript模板引擎,适用于浏览器端或Node环境中视图的生成。
JavaScript
496
star
19

okam

Mini program development framework
JavaScript
416
star
20

react-native-cn

407
star
21

est

EFE Styling Toolkit based on Less
Less
398
star
22

saber

移动 Web 解决方案
CSS
358
star
23

esui

enterprise simple ui library
JavaScript
340
star
24

er

enterprise ria framework
JavaScript
301
star
25

knowledge

Front-end knowledge hierarchy
CoffeeScript
236
star
26

rider

Rider 是一个基于 Stylus 与后处理器、无侵入风格的 CSS 样式工具库
CSS
205
star
27

echarts-map-tool

Map Tool for Apache ECharts
JavaScript
130
star
28

js-native

JavaScript
116
star
29

uioc

IoC Framework for us
JavaScript
115
star
30

eslint-config

eslint shareable config for efe
JavaScript
111
star
31

san-cli

A CLI Tooling based on San.js for rapid development.
JavaScript
98
star
32

san-mui

A Set of SAN Components that Implement Google's Material Design
JavaScript
95
star
33

ub-ria

RIA base for union business
JavaScript
94
star
34

react-kiss

A simple and stupid react container solution
JavaScript
85
star
35

react-suspense-boundary

A boundary component working with suspense and error
TypeScript
84
star
36

san-xui

A Set of SAN UI Components that widely used on Baidu Cloud Console
JavaScript
81
star
37

gulp-fontmin

Minify font seamlessly
JavaScript
80
star
38

echarts-optimizer

JavaScript
79
star
39

santd

San UI Toolkit for Ant Design
TypeScript
76
star
40

moye

A Simple UI Library for ZX
JavaScript
74
star
41

ecomfe.github.io

https://efe.baidu.com
JavaScript
72
star
42

react-track

A declarative, component based solution to track page views and user events with react & react-router
TypeScript
71
star
43

echarts-graph-modularity

Graph modularity extension for community detection with Apache ECharts
HTML
70
star
44

tempad-dev

Inspect panel on Figma, for everyone.
Vue
67
star
45

diffy-update

Scripts to update object or array with a diff output
JavaScript
54
star
46

gitdiff-parser

A fast and reliable git diff parser.
HTML
53
star
47

learn-graphql-cn

Learn GraphQL 中文翻译
48
star
48

standard-redux-shape

A library to help standardize your redux state shape
JavaScript
47
star
49

htmlcs

HTML Code Style
JavaScript
46
star
50

saber-showcase

使用 saber 创建的 WebApp 示例
JavaScript
41
star
51

smarty4js

a JavaScript template most like smarty, use smarty module in javascript
JavaScript
34
star
52

rebas

Node framework for Saber, base on Express
JavaScript
34
star
53

baidubce-sdk

Baidu Cloud Engine Node.js SDK
JavaScript
28
star
54

node-csshint

Csshint your css code
JavaScript
27
star
55

amd-analyzer

JavaScript
26
star
56

echarts-bmap

HTML
26
star
57

light-dls

Front-end assets and tooling for Baidu Light DLS.
Less
25
star
58

san-loader

San-Loader 是基于 webpack 的工具,允许开发者书写 San 单文件的方式来进行组件开发。
JavaScript
25
star
59

redux-optimistic-thunk

redux-thunk like dispatching with optimistic UI supported
JavaScript
25
star
60

zrender-doc

Document for zrender
JavaScript
22
star
61

grapher.js

JavaScript 3D Plot Library
JavaScript
21
star
62

redux-managed-thunk

A redux-thunk compatible middleware with managed feature to help write more controllable and reusable thunks
JavaScript
20
star
63

efe

EFE guide
20
star
64

mini-event

A simple and dedicated library to provide event related components
JavaScript
18
star
65

veui-theme-blue

a theme for VEUI
Less
18
star
66

esui-family

Online Demo and document of ESUI Family
JavaScript
18
star
67

dls-icons

Icons for Baidu Light DLS.
JavaScript
17
star
68

echarts-gallery-feedback

Official Feedback Repository for ECharts Gallery
16
star
69

edp-webserver

Package for edp webserver.
JavaScript
16
star
70

san-realworld-app

An exemplary real-world application built with San. This is a good example to discover San for beginners.
JavaScript
16
star
71

san-transition

Append transition effects for elements in san components.
JavaScript
16
star
72

node-lesslint

Less lint
JavaScript
15
star
73

ef

ef is a integration framework with er & esui
JavaScript
14
star
74

echarts-builder-web

ECharts online builder
JavaScript
14
star
75

saber-ajax

适用于移动端、promise 风格的 ajax 封装
JavaScript
13
star
76

san-anode-utils

Util Functions for San ANode
JavaScript
13
star
77

promise

A promise respecting ES standard with plenty of handy extensions
JavaScript
12
star
78

saber-env

移动端浏览器环境检测
JavaScript
12
star
79

echarts-dagre

ECharts graph layout extension using dagre.js
JavaScript
12
star
80

aop

Aspect oriented programming utilities
JavaScript
12
star
81

sublime-etpl

An ETPL syntax definition & snippets specifically for Sublime Text.
Python
12
star
82

bat-ria

RIA extensions for Brand Ads
JavaScript
11
star
83

deep-grasp

A toolkit for adopting LLM into your existing app.
TypeScript
11
star
84

ub-ria-ui

UI components for ub ria applications - standardized & implemented
JavaScript
11
star
85

edp-build

Package for edp build.
JavaScript
10
star
86

webpack-auto-cdn-plugin

Webpack plugin to automatically extract dependencies and reference them via CDN
JavaScript
10
star
87

stylelint-config

Standard stylelint config for efe team
JavaScript
10
star
88

saber-promise

适合移动端的 Promise/A+ 实现
JavaScript
10
star
89

rider-ui

基于 rider 的 UI 样式库,用于快速构建移动应用界面
CSS
9
star
90

saber-router

适用于移动端的路由控制,支持 hash, popstate
JavaScript
9
star
91

saber-scroll

为移动端页面提供区域滚动功能
JavaScript
9
star
92

blog

Blog
CSS
9
star
93

html-nest-rule

JavaScript
8
star
94

veui-docs

Documentation website for VEUI.
JavaScript
8
star
95

saber-matchmedia

移动端 matchMedia 支持
JavaScript
8
star
96

eicons

ecom public web font icons
CSS
8
star
97

query-shape

Standard utilities to manage query requests and responses
JavaScript
8
star
98

esf

EFE Style Framework
CSS
8
star
99

saber-dom

一个适用于移动端、静态函数风格的DOM工具库
JavaScript
7
star
100

svg-mixed-loader

Webpack loader resolving svg into url string and multiple component formats.
JavaScript
7
star