zhoubichuan / web-react

📖react 16.x、react17.x相关知识的总结--持续更新💪【http://zhoubichuan.com/web-react】

综合案例

myantd

基本 antd 4.0 二次封装的业务组件库。

文档请配合 antd 文档使用 Ant Design

使用方法

安装

以 yarn 为例

yarn add myantd

配置

.bablerc

使用

1、 使用包内的 ConfigProvider 组件对应用根节点组件进行包裹，修改全局组件命名空间为 myantd

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { ConfigProvider } from 'myantd'

ReactDOM.render(
  <ConfigProvider>
    <App />
  </ConfigProvider>,
  document.querySelect('#root')
)

2、这样引入组件即可，会按需加载基于 antd 定制过的组件

import React from 'react'
import { Button } from 'myantd'

export default () => {
  return <Button type="primary">点我</Button>
}

3、此外 myantd 必须全量引入定制过的 antd 样式。

import 'myantd/esm/styles/index.css'

PS：如果项目中已经有 antd 3.x 版本，请引入 myantd 所有组件样式。

import 'myantd/esm/styles/styleWithoutGlobal.css'

譬如在umi项目中使用，定位global入口

import React from 'react'
import { Button,ConfigProvider } from 'myantd';
// + import 'myantd/esm/styles/index.css'

export default function IndexPage() {
  return (
    <ConfigProvider>
      <h1>Page index</h1>
      <Button type="primary">button</Button>
    </ConfigProvider>
  );
}

如何开发 myantd

yarn

# 启动
yarn start

# 构建
yarn build

开发官网

在 src 文件中，修改组件，编写组件文档及单元测试。

发包流程

1. 提交代码

# 首先确认要提交的文件
git add .

# 运行提交命令
# 无add时，需要优化
yarn commit
# 或者
npm run commit

后续步骤同正常git代码提交流程

2. 发包

# 升级版本
yarn release
# 或者
npm run release

web-react

在 这里 阅读体验更佳

整理自各大技术社区和权威书籍的前端技术图谱