foxpage-component-react
Foxpage react 框架组件
文件结构
── <root>
├── .editorconfig // @see: https://editorconfig.org/
├── .eslintrc // eslint 配置
├── .gitignore
├── .prettierrc.js // Prettier 格式化配置 @see: https://prettier.io/docs/en/configuration.html
├── README.md
├── babel.config.js // babel 配置 @see: https://babeljs.io/docs/en/configuration
├── jest.config.js // jest 配置 @see: https://jestjs.io/docs/en/configuration
├── lerna.json // lerna 配置 @see: https://github.com/lerna/lerna#lernajson
├── package.json
├── postcss.config.js // postcss 配置 @see: https://github.com/postcss/postcss#usage
├── schema.config.js // schema 配置 @see: https://github.com/YousefED/typescript-json-schema#command-line
├── tsconfig.json // typescript 配置 @see: https://www.typescriptlang.org/docs/handbook/tsconfig-json
├── typing.d.ts // 类型声明扩展
├── .foxpage // foxpage 配置文件的标识目录
│ ├── webpack.js // 所有组件 `build:foxpage` 构建时可以自定义 webpack 配置
│ └── jest // jest 配置文件入口, foxpage 内置了 setup, setupEnv, 无需用户手动指定文件入口
│ ├── setup.js // jest 配置的 setupFiles 参数内置指向该文件
│ └── setupEnv.js // jest 配置的 setupFilesAfterEnv 参数内置指向该文件
├── .storybook // storybook 配置 @see: https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project
│ ├── main.js
│ ├── middleware.js
│ ├── preview.js
│ └── decorators // 一个 storybook decorators 插件示例
│ └── foxpage-customer-ctx.js
├── dist // 组件 foxpage 资源集合
├── package-template // 组件模板, 用于创建新的组件
└── packages // 组件文件夹
安装
yarn boot
安装或更新依赖
启动
yarn start
启动本地组件开发环境
组件开发
本项目基于 storybook 搭建, 如需良好的开发体验需要对 storybook 有一点的了解, 了解后才能更好的开发组件
创建组件
在根目录运行 yarn package:new
新建按指引新建组件
如何开发
在 <root>/packages/<package>
目录下开发对应组件, 有提供几个基础的组件示例, 可自行查看
/src
: 开发组件的代码, 用react
自由发挥/editor
: 为你的组件编写 editor 编辑器, 可用于本地或foxpage平台。已提供很多基础组件, 可根据 type 定义直接使用/test
: 为你的组件编写测试用例/stories
: 为你的组件编写 storybook 能够识别的stories
用于本地开发组件
资源构建
单个组件:
yarn build:foxpage
: 构建出/dist
用于foxpage
平台注册的组件静态资源yarn build:lib
: 构建出/lib
用于npm
包的发布注册 (私有仓库请自行修改仓库地址, 或者自行提供 pipeline 运行的脚本)yarn build:es
: 构建出/es
用于npm
包的发布注册 (私有仓库请自行修改仓库地址, 或者自行提供 pipeline 运行的脚本)yarn build:md
: 基于src/typing.ts
(需要遵循 schema规范) 构建出schema.md
, 快速生成组件的Props
说明文档, 对外方便接入
全部组件(项目根目录):
yarn build:foxpage
: 将所有组件的/dist
提取到根目录, 用于foxpage
平台, 组件资源可以按项目维度整体发布(支持缓存, 详情自行查看foxpage脚手架说明文档)
组件发布
npm 包发布
组件构建完成后, 运行 yarn version
对更改的包进行版本升级, 如需直接发布可运行 lerna publish
发布, 可查看官网了解 lerna 包管理工具