- ✅ 多包管理
- ✅ 单元测试
- ✅ 文档阅读
- ✅ eslint 规范
- ✅ cjs + esm 编译
- ✅ typescript
依赖下载
$ npm i
$ npm run bootstrap开发环境
$ npm start文档打包
$ npm run docs:build项目打包
$ npm run build-
packages
- hooks ---> @ife/hooks 通用 hooks，不涉及业务逻辑
- pro-components ---> @ife/pro-components 通用 ppfish 增强组件，不涉及业务逻辑
- Table
- Form
- ......
为所有项目安装依赖，类似于 npm/yarn i
lerna bootstrap使用 lerna 初始化项目
lerna init # 固定模式(Fixed mode)默认为固定模式，packages下的所有包共用一个版本号(version)
lerna init --independent # 独立模式(Independent mode)，每一个包有一个独立的版本号为 packages 文件夹下的 package 安装依赖
lerna add <package>[@version] [--dev] # 命令签名
# 例如
lerna add module-1 --scope=module-2 # 将 module-1 安装到 module-2
lerna add module-1 --scope=module-2 --dev # 将 module-1 安装到 module-2 的 devDependencies 下
lerna add module-1 # 将 module-1 安装到除 module-1 以外的所有模块
lerna add babel-core # 将 babel-core 安装到所有模块卸载依赖
lerna exec -- <command> [..args] # 在所有包中运行该命令
# 例如
lerna exec --scope=npm-list yarn remove listr # 将 npm-list 包下的 listr 卸载
lerna exec -- yarn remove listr # 将所有包下的 listr 卸载显示 packages 下的各个 package 的 version
lerna ls清理 node_modules
lerna cleanlerna run
lerna run <script> -- [..args] # 在所有包下运行指定
# 例如
lerna run test # 运行所有包的 test 命令
lerna run build # 运行所有包的 build 命令
lerna run --parallel watch # 观看所有包并在更改时发报，流式处理前缀输出
lerna run --scope my-component test # 运行 my-component 模块下的 test
- @umijs/test，测试脚本，内置 jest 测试框架
- @testing-library/react，React 组件测试工具
- puppeteer，Headless 浏览器工具，用于 E2E 测试。
目录规范
.
├── package.json
├── packages
│ ├── bs-components
│ │ └── src
│ │ └── YsHeader
│ │ └── __test__
│ │ └── index.test.tsx # 插件测试用例
├── tsconfig.json
├── .fatherrc.ts
└── yarn.lock
hooks 测试示例
import { renderHook, act } from '@testing-library/react-hooks';
import useTest from '../index';
const setUp = (defaultValue?: any) => renderHook(() => useTest(defaultValue));
describe('useTest', () => {
it('should be defined', () => {
expect(useTest).toBeDefined();
});
it('test on methods', async () => {
const { result } = setUp(false);
expect(result.current[0]).toBeFalsy();
act(() => {
result.current[1](true);
});
expect(result.current[0]).toBeTruthy();
});
});组件测试示例
import * as React from 'react';
import { render } from '@testing-library/react';
import TreeSelect from '../index';
test('TreeSelect test', () => {
const wrapper = render(<TreeSelect />);
const el = wrapper.queryByText('pro-components TreeSelect');
expect(el).toBeTruthy();
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent