lvbowen / umi-father-seed

基于umi father 构建的react组件库的示例工程

@arkrm/umi-father-seed

基于umi father 构建的react组件库的示例工程。

REACT 组件库开发指南

开始

建议通过 yarn link 的方式进行本地调试

git clone https://github.com/arkrm/umi-father-seed.git

开发模式

开发模式下，会监听文件的变更，实时构建。

yarn start

需要注意的是，开发模式生成目录与生产模式不同，而package.json 里的 main types module 均是针对生产模式构建的包进行指定的，如果在开发模式本地调试，引用方式如下:

import { Hello } from '@arkrm/umi-father-seed/dist';
// 全量引入css文件
import '@arkrm/umi-father-seed/dist/entry.css';

生产模式

yarn build

生产模式本地调试，引用方式如下：

全量引入方式

默认支持基于 ES Module 的摇树优化，不使用插件babel-plugin-import也会有按需加载的效果。但是，css 文件仍然需要全量引入或手动按需引入。

import { Hello } from '@arkrm/umi-father-seed';
import '@arkrm/umi-father-seed/dist/index.min.css';

按需引入方式

// babel plugin config
{
  plugins: [
    ...otherPlugins,
    [
      'import',
      {
        libraryName: '@arkrm/umi-father-seed',
        style: true,
        libraryDirectory: 'es', // 或 lib
      },
      '@arkrm/umi-father-seed',
    ],
  ];
}

import { Hello } from '@arkrm/umi-father-seed';

手动按需引入

import Hello from '@arkrm/umi-father-seed/es/hello';
import '@arkrm/umi-father-seed/es/hello/style';

单元测试

yarn test

特性

• 同时生成 umd cjs ems 格式的构建包
• 基于jest的单元测试配置与示例
• 基于 css 变量的主题定制
• 支持全量引入和使用babel-plugin-import按需引入

TODO

1.0 ROADMAP