worldzhao / react-ui-library-tutorial Goto Github PK

View Code? Open in Web Editor NEW

476.0 6.0 116.0 3.33 MB

📚React组件库搭建指南

Home Page: https://worldzhao.github.io/react-ui-library-tutorial/

JavaScript 40.43% TypeScript 45.01% Less 1.17% Handlebars 12.14% Shell 1.25%

react react-components react-tutorial tutorial-demos frontend web tutorial

react-ui-library-tutorial's Introduction

React 组件库搭建指南

🚀 在线预览

🚆 本地预览

git clone [email protected]:worldzhao/react-ui-library-tutorial.git
cd react-ui-library-tutorial
pnpm install
pnpm start

按顺序执行完命令后，即可在 localhost:3000 端口看到以下内容：

概览

本系列文章主要包含以下内容：

项目初始化: 组件库前期开发准备工作。eslint/commit lint/typescript等等；
开发阶段: 使用 dumi 进行开发调试以及文档编写；
打包阶段: 输出~~umd~~/cjs/esm产物并支持按需加载；
组件测试: 使用@testing-library/react及其相关生态进行组件测试；
发布 npm: 编写脚本完成发布或直接使用 np 发布；
部署文档站点: 使用 Github Pages 以及 Github Actions 完成文档站点自动部署。

react-ui-library-tutorial's People

Contributors

Stargazers

Watchers

Forkers

hywilliam lvbowen darlk liu-huitao verystarters joernlee zzzztc huatao1990 roderick-cc funlee jiangzhuorong jonathan-art116 alucardhyx xianyunyehexjy zfzhengfeng beibeibear yanlibo2021 ouwei-lee shengguozhou woshi555bin w3cui donybin francoly zhangshifuicetea clydeshen yulongcs aminwangaa pray11 ruoduan-hub fenqiang4952 wangliang01 xichangzhou williamcui31 dyzlx ppatch zacard-orc rocspring bluesvn viccsen xumengxiang axl234 yuweilan caokun1021 zzuhit biu-huang leonchan911 leocoder351 helloworldhzx hhy5277 dianjiangtan fallenner brianwalkertoretto shervinchen izhangxu huang-1234 zhoushan1 hansummer huanyer tiyunchen mayunyi yan919 pxl0510 jeffywin complicated2018 simplystyle youlinaa gllidan tankerx lisf bowling00 zhangwai jinjinhrb zhourusheng bicitechfed jawq treel1n wangux lvsechoudaizi wxfwill zhanglunyu418 lym-m liuxl1996 sealzrt 825221503 see7788 githdu alpsli huangpfly jahaw gtliangming 314857493 dharmesh1979 yusixian guaqiu5 apologizefor nywgithub jinly2 amyyo henry-diasa silentzhou

react-ui-library-tutorial's Issues

引入图片问题

import avatar from './avatar.png';

没法直接引入图片

你好

好巧，我也想弄一个这样的组件库

package.json 中为什么可以直接运行 ts？

{
 "new": "plop --plopfile ./scripts/plopfile.ts",
}

npm run new
这里为什么能直接运行ts，有什么配置吗？

如何控制文档中组件的显示顺序

我想控制这些组件的显示顺序，怎么弄呢

能写一下如何部署吗

ERROR #98123 WEBPACK

Generating development JavaScript bundle failed

Unexpected token (17:40)

File: ../node_modules/_gatsby-theme-docz@2.3.1@gatsby-theme-docz/src/base/Layout.js:17:40

failed Building development bundle - 7.341s

git clone 后npm i 启动项目报错

有两个问题想请教

1.在doc的mdx中这样引入css

import './style'

在开发环境中，样式可以用，但在build之后，部署到github，样式会没得到引用。

2.关于icon组件，使用svg-sprite-loader方式，在gatsby-config文件写入gatsby-plugin-svg-sprite，同样，在本地开发环境起作用，但是在build之后，并不会好用。

请问，这两个问题能帮忙分析下是为什么吗？

引用antd二次封装之后，在yarn build 报错

node_modules/rc-field-form/es/Form.d.ts:20:27 - error TS2694: Namespace 'React' has no exported member 'ForwardRefRenderFunction'

jest配置错误

➜  react-ui-library-tutorial git:(master) yarn jest                  
yarn run v1.22.15
$ /Users/chenyulun390/github/react-ui-library-tutorial/node_modules/.bin/jest
No tests found, exiting with code 1
Run with `--passWithNoTests` to exit with code 0
No files found in /Users/myusername/github/react-ui-library-tutorial.
Make sure Jest's configuration does not exclude this directory.
To set up Jest, make sure a package.json file exists.
Jest Documentation: facebook.github.io/jest/docs/configuration.html

jest.config.js根目录下面没有components目录

module.exports = {
  verbose: true,
-   roots: ['<rootDir>/components'],
+  roots: ['<rootDir>/components', '<rootDir>/src'],
  moduleNameMapper: {
    '\\.(css|less|scss)$': 'identity-obj-proxy',
    '^components$': '<rootDir>/components/index.tsx',
    '^components(.*)$': '<rootDir>/components/$1',
  },
  testRegex: '(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  testPathIgnorePatterns: ['/node_modules/', '/lib/', '/esm/', '/dist/'],
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
};