raal

这是一个用于 react ui 组件库开发的脚手架, 具有文档网站开发,ui 组件开发的功能

English

❤ 推荐使用 vscode

历史

v0.10-beta

1. 添加e2e测试 修复bug puppeteer 下载需要等待时间较长
2. 改名为 raal react application and library

v0.02-alpha2

1. 修复 webpack 无法导入compass
2. 注意 import 时不要加.scss 拓展名 否则webpack无法打包
3. 修复webpack无法 打包scss, rename 插件将scss 改成了css

v0.02-alpha1

1. 去除scss:watch 字段
2. 添加 babel-plugin-transform-rename-import 在生产环境 import 的.scss 转化为.css
3. 更改.babelrc 为 .babelrc.js

v0.01-alpha6

1. 添加Husky、Lint Staged、ChangeLog和Commitien
2. 移除prettier 开启vscode自动保存格式化, 会和eslint冲突
3. 更新.eslintrc

v0.01-alpha4

1. 删除tslint, 使用 eslint
2. add .vscode and set "prettier.eslintIntegration": false because prettier error, details #672

1. 安装

npm i raal -g

2. 使用方法

全局命令

Usage: cli [options]
Options:
  -v, --version          output the version number
  -a,  --author <name>   add Author
  -l,  --license <name>  add License
  -h, --help             output usage information

模板中的命令

• npm start

  • 打开文档开发环境，提供组件开发和文档网站开发的 development 环境

• npm run lib

  • 使用 babel 编译组件库 到 release/lib 文件夹下 并生成 d.ts, main 字段指向 release/lib/exports.js

• npm run es

  • tsc 直接编译到 release/es 文件夹下 并生成 d.ts module 字段指向 release/es/exports.js

• npm run dist

  • webpack 打包 到 release/dist 文件夹下

• npm run app

  • webpack 打包文档网站

• npm run release

  • 发布同时进行 lib es dist app

• npm run dts:es

  • 向 release 的 es 中写入 d.ts

• npm run dts:lib

  • 向 release 的 lib 中写入 d.ts

• npm run dts

  • 向 release 的 es 和 lib 中写入 d.ts

• npm run scss

  • 编译 scss

• npm run test

  • npm run test:e2e && npm run test:unit

• npm run test:e2e 需要先手动开启server npm start

  • _jest + puppeteer _
  • 文档见 jest jest-puppeteer puppeteer

• npm run test:unit

  • _jest + enzyme _,
  • 文档见 jest enzyme react-test-renderer

• npm run test:ci

  • 用于ci测试

• npm run cz:init

  • 初始化commitizen, 它会格式化你的commit message, 使用git cz 代替 git commit -m,在commit 完后会自动运行eslint husky and lint-staged

• npm run eslint

  • auto fix tsx, ts, js, jsx, but some problems can't be fixed eslint

• npm run changelog

  • 生成 CHANGELOG.md conventional-changelog

例子

1. raal app (不能含有 react)
2. npm install 安装依赖

3. 注意

1. 预加载处理器使用 scss
2. ci 使用 travis
3. 覆盖率使用 codecov
4. 测试单元用 jest + enzyme 默认开启 snaptshot
5. 在.script/config.json 更改一些默认设置

5. 其他

如果你想只用于 app 开发也行 毕竟我 copy 了很多 raal 的代码 🤭🤭