create-muguet-lib v0.0.2-alpha1

create-muguet-lib

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

English

❤ 推荐使用 vscode

1. 安装

npm i create-muguet-lib -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

  • 使用 jest + enzyme, 在项目中随意建立一个__tests__ 否则运行此命令报错, Snapshot 默认使用

• 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. create-muguet-lib app (不能含有 react)
2. npm install 安装依赖

3. 注意

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

4.历史

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, 使用
2. add .vscode and set "prettier.eslintIntegration": false because prettier error, details #672

5. 其他

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