quick-react-scripts

Intro

quick-react-scripts用于快速创建React组件项目.

特性:

• [x] TypeScript 支持
• [x] Jest, react-testing-library 测试
• [x] Rollup 打包assets文件, 比如scss
• [x] install时优先使用yarn
• [x] 支持最新的React Hooks
• [x] 支持storybook

Table of contents

• 🚀Getting Started
• 📒Guide
  • 🛠Init
  • 🔧Build
  • 🧪Test
• 🏰Case

Getting Started

1. 全局安装quick-react-scripts:

yarn global add quick-react-scripts

2. 初始化一个项目

quick-react-scripts init my-component

Guide

quick-react-scripts是一个CLI工具, 以下介绍如何CLI的子命令.

quick-react-scripts -h 查看帮助

Init

quick-react-scripts init hello-wrold

初始化一个组件项目, 创建好了一切.

包含:

• 一个简单的组件
• 一个简单的测试
• 一个简单的例子
• 自动化的storybook,
  • examples文件夹中的例子自动加载
  • readme自动加载
  • 组件propsapi
• 支持scss等assets编译[可选]

Build

quick-react-scripts build

不要独立运行命令, 初始化项目后, 它已经包含在package.json的scripts里.

# init
quick-react-scripts init hello-wrold
cd hello-wrold
# run build
yarn build

编译仅仅是调用tsc去编译src里的代码, 通过更改tsconfig.json去配置编译. 并且编译后的都是es模块代码, 也不会做任何polyfills.

所以最后都是在最终项目中处理这些es组件模块的转换, 压缩等.

编译assets

编译assets是可选的, 需要时请提供一个入口文件, 位于如下位置:

hello-wrold
└── src
    └── assets
        └── index.js

// src/assets/index.js
// 引入需要编译打包的文件
import "./index.scss";

编译完后会在项目根目录下创建assets文件夹. 和_.js的文件, 可以通过覆盖默认配置去控制.

默认编译配置

{
    "file": "assets/_.js",
    "format": "es"
}

修改package.json的rollup字段配置编译:

{
    "rollup": {
        "file": "assets/_.js",
        "format": "es"
    }
}

Test

quick-react-scripts test

不要独立运行命令, 初始化项目后, 它已经包含在package.json的scripts里.

# init
quick-react-scripts init hello-wrold
cd hello-wrold
# run test
yarn test

将调用jest去测试项目, 测试文件位于tests文件夹内名为xx.spec或xx.test, 后缀名为ts或tsx的文件

覆盖测试配置

修改package.json的jest字段配置测试:

{
    "jest": {
        "testMatch": ["<rootDir>/tests/**/*.(spec|test).ts?(x)"],
        "transformIgnorePatterns": ["<rootDir>/node_modules/(?!(utils-hooks/es))"]
    }
}

Case

使用quick-react-scripts的案例:

• xy-affix 图钉组件, 将元素固定在屏幕视窗内
• xy-alert 警告提示组件, 简单的样式组件
• xy-autocomplete 联想输入组件
• xy-badge 徽章组件, 右上角显示徽章数
• xy-button 按钮组件
• xy-card 卡片组件, 简单的样式组件
• xy-checkbox 复选框, 单选框组件
• xy-css-transition css 过渡组件, 包裹需要过渡的元素, 在进入,离开时设置样式
• xy-date-picker 日期选择器
• xy-divider 分割线, 简单的样式组件
• xy-drawer 抽屉组件
• xy-empty 空状态组件
• xy-form 表单组件
• xy-grid 栅格组件,与 antd 一摸一样
• xy-image Image组件, 提供了图片占位符, 媒体查询切换图片等功能
• xy-input 输入框组件
• xy-input-number 数值输入框组件
• xy-messagebox 消息弹框组件
• xy-model 模态对话框
• xy-notification 通知组件, 右上角弹出通知
• xy-page-transition 页面过渡组件,一般用于路由动画
• xy-pagination 分页器
• xy-popover 气泡卡片组件
• xy-select 下拉列表组件
• xy-skeleton 骨架屏组件
• xy-spin 加载中组件
• xy-steps 步骤条组件
• xy-switch 开关组件
• xy-table 表格
• xy-tabs 选项卡组件
• xy-time-picker 时间选择器
• xy-time-select 时间下拉列表
• xy-tooltip 提示组件
• xy-trigger 触发器组件, 包裹元素监听相应事件
• xy-upload 上传组件

License

Quick-React-Scripts is open source software licensed as MIT.