Skip to content

arkrm/umi-father-seed

Repository files navigation

@arkrm/umi-father-seed

Build Status GitHub package.json version Coveralls github GitHub issues GitHub forks GitHub stars GitHub license

基于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