@aiou/react-components-lib-template

react-components-lib-template

Usage no npm install needed!

<script type="module">
  import aiouReactComponentsLibTemplate from 'https://cdn.skypack.dev/@aiou/react-components-lib-template';
</script>

README

@aiou/react-components-lib-template

a template of react components lib, insipred by antd-tools

@aiou/react-components-lib-template应该替换为真实的npm package name

npm GitHub

Useage of Single Component lib

with babel-plugin-import

  • use with umi

    extraBabelPlugins: [
      [
        'import',
        {
          libraryName: '@aiou/react-components-lib-template',
          style: 'css',
        },
      ],
    ]
    

    适配程度更好的方式

    1. 删除.pipe(replace(/(styl)'/g, "css.json'"))
    extraBabelPlugins: [
      [
        'import',
        {
          libraryName: '@aiou/react-components-lib-template',
        },
      ],
    ]
    

    same as babel-plugin-import

in dev mode

  • replace import styles from './style/demo.css.json' with import styles from './style/demo.styl'

For Dev

  • npm run build会通过glupfile.js进行组件库打包。

  • npm run dev开启dev模式

    • 组件的在线预览是通过在src/pages/*.tsx引入components文件实现的
  • 如何测试

    • 建议在组件下新建__test__文件夹
    • testsetupTests.ts是为了set config for jest
    • 如何给react hooks测试。建议使用@testing-library/react-hooks
    • 如何给还有借口组件测试
      • 一部分需要参考@testing-library/react-hooks异步组件测试方式
      • 另外在dev模式下开启了umisever。任何localhost:port/proxy/xx都会指向example/src/mock文件夹。这部分请参考umi
  • 如何组件命名

    • Demo组件对应components/demo
    • DemoView组件对应components/demo-view
  • 如何导入外部的stylus lib

    .pipe(
      stylus({
        'include css': true,
        set: ['resolve url'],
        use: [plugin()], // some stylus plugin like nib
        import: [
          path.resolve(
            __dirname,
            'path/index.styl', // external stylus path
          ),
          path.resolve(__dirname, 'components/style/gray.styl'),
        ],
      }),
    )
    
    
    • 修改css-name。这部分是通过配置build/postcss.config.jscss-modules