1. 本地开发
1.1 前序准备
我们的技术栈基于 ES2015+、React、dumiJS 、umiJS、webpack、 antd等，提前了解和学习这些知识会非常有帮助
1.2 组件库
环境要求
$ node -v
v10.13.0- 推荐使用 yarn 管理 npm 依赖，并使用国内源（阿里用户使用内网源）。
# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v底层框架
框架实现功能
- 实现无antd JS源码并且不打包源码情况下，通过依赖导出antd 组件，antd升级只需要依赖升级即可
- 导出自定义组件
- 组件文档查看以及部署
- 灵活定制主题，现系统默认定制符合政企中台规范样式的主题
- 配置按需加载ruxd，在demo中引用，可去掉antd引用或者相对路径引用组件。（demo如果引用antd，则在文档demo中主题未跟着系统主题设置）
- 脚本配置，在package.json中，配置了多个命令，可执行，其中包含了私有库发布
- 支持jest框架的自动测试
- prettier前端代码格式化
- eslint代码校验
1.3 安装源码
从天梯中安装uni-design最新代码
$ git clone --depth=1 http://10.124.128.2:8888/unilab/frontend/uni_design.git1.4 目录结构
|--- dist # 源码编译生成的目录
|--- docs # 组件库文档目录
| |--- index.md # 组件库文档首页
| |--- guide # 组件库文档其他路径
| | |--- index.md
|--- es # 源码编译生成的目录
|--- lib # 源码编译生成的目录
|--- public
|--- scripts # 存放脚本目录
|--- src # 组件库源码目录
| |--- assets # 静态资源
| |--- count-down # CountDown组件库源码
| | |--- __tests__ # 测试文件目录
| | | |--- index.test.js
| | |--- demo # 模板目录
| | | |--- base.md # 基础语法
| | |--- style # 样式目录
| | | |--- index.less
| | | |--- index.tsx # 页面样式入口（按需加载使用））
| | |--- index.tsx # 组件源码
| | |--- index.md # 组件文档
| |--- locales # 国际化
|--- .babelrc
|--- .editorconfig
|--- .fatherrc.js # father打包工具配置文件
|--- .gitignore
|--- .prettierignore
|--- .prettierrc
|--- .umirc.ts # dumi配置文件(也可以是config/config.ts)
|--- .fatherrc.js # father打包工具配置文件
|--- package.json # 依赖包配置文件
|--- README.md
|--- tsconfig.json # typeScript配置文件
|--- typings.d.ts
|--- webpack.config.js
|--- yarn.lock1.5 本地开发
安装依赖
$ yarn
yarn install v1.21.1
[1/4] 🔍 Resolving packages...
success Already up-to-date.
✨ Done in 0.71s.启动项目
$ yarn start
Starting the development server...
✔ Webpack
Compiled successfully in 17.84s
DONE Compiled successfully in 17842ms 8:06:31 PM
App running at:
- Local: http://localhost:8000 (copied to clipboard)
- Network: http://192.168.12.34:8000- 在浏览器里打开 http://localhost:8000/，能看到以下界面
- 因为umi升级，不再支持自动打开浏览器，所以需要手动打开
1.6 组件开发
开发带有图片裁剪功能的ImageCrop 组件
开发步骤
- 创建文件夹ImageCrop，文件名不支持驼峰式命名，多单词用 “-” 链接
- 创建index.ts 编写组件源码
- 创建demo文件夹，增加base.tsx 增加组件基础例子
- 在src/index 中导出ImageCrop 组件
- 创建index.md 编写ImageCrop文档API，增加demo的应用。格式规范查看文档dumi
- 创建style文件夹，并在其文件夹下创建index.tsx，用于组件源码样式引用。另外文件中引用项目定义好的一些样式变量。
修改组件样式
如果组件样式不满足规范样式，可以在src文件夹下找到对应组件的文件夹。在其style中找对应主题文件中，修改其引用变量，以达到满足。参考less
1.7 多主题开发（以公众平台为例）
1、在src/style/themes路径下增加主题配置文件pop.less,并将配置的变量放在文件中
...
@primary-color: #E50017;
...2、在src/style路径下增加pop.less,增加对主题变量的引用
@import './themes/pop.less';
@import './core/index';3、在Scripts 文件中创建 pop-vars.js,并获取主题文件的变量,注意修改读取文件名
const fs = require('fs');
const path = require('path');
const lessToJs = require('less-vars-to-js');
const stylePath = path.join(__dirname, '..', 'src', 'style');
const popLess = fs.readFileSync(path.join(stylePath, 'themes', 'pop.less'), 'utf8');
const darkPaletteLess = lessToJs(popLess, {
stripPrefix: true,
resolveVariables: false,
});
module.exports = darkPaletteLess;4、在webpack.config.js 中，增加配置的新竹主题，并使用webpack多配置文件打包。
...
const popVars = require('./scripts/pop-vars');
...
const defaultConfig = webpackConfig();
const webpackPOPConfig = webpackConfig();
processWebpackThemeConfig(webpackPOPConfig, 'pop', popVars);
module.exports = [...defaultConfig, ...webpackPublicConfig];5、scripts/finalizeDist.js文件中构建主题
/**
* 在lib/style文件中，新增components.less,作用引用所有组件的样式
*/
...
const popVars = require('./pop-vars');
...
function finalizeDist() {
if (fs.existsSync(path.join(__dirname, '../dist'))) {
// Build less entry file: dist/antd.less
fs.writeFileSync(
path.join(process.cwd(), 'dist', 'ruxd.less'),
'@import "../lib/style/index.less";\n@import "../lib/style/components.less";',
);
// eslint-disable-next-line no-console
fs.writeFileSync(
path.join(process.cwd(), 'dist', 'theme.js'),
`const defaultTheme = require('./default-theme.js');\n`,
);
// eslint-disable-next-line no-console
console.log('Built a entry less file to dist/ruxd.less');
buildThemeFile('default', defaultVars);
buildThemeFile('pop', popVars);
fs.writeFileSync(
path.join(process.cwd(), 'dist', `theme.js`),
`
function getThemeVariables(options = {}) {
let themeVar = {
'hack': \`true;@import "\${require.resolve('antd/lib/style/color/colorPalette.less')}";\`,
...defaultTheme
};
if(options.public){
themeVar = {
...themeVar,
...popThemeSingle
}
}
return themeVar;
}
module.exports = {
popThemeSingle,
getThemeVariables
}`,
{
flag: 'a',
},
);
}
}
finalizeDist();1.7 注意事项
自定义组件命名不支持驼峰式，多单词用-链接，因为兼容antd命名规范，且按需加载引用名默认引用
开发需要使用自定义类名，尽量使用前缀变量，便于灵活配置以及维护
@import '../../style/themes/index';
.@{rux-prefix}-uploadSize {
.ant-upload {
height: 200px;
width: 200px;
}
}私有库发布脚本使用 simple-git校验git-commit，check只有在master分支且代码已经提交情况下才会进行发布
demo中引用组件从ruxd
import {Button} from 'ruxd'1.8 什么时候不用ruxd
- 需要支持 IE 8 或更低版本的浏览器
- 需要支持 React 16.8.0 以下的 React
- 需要跑在 Node 10 以下的环境中
- umi 版本在3.0以下版本
- antd 版本在4.0以下版本
2. 业务系统使用
2.1 环境要求
- react 16.8 版本以上
- umi3.X 版本以上
- antd4.X 版本以上
2.2 安装
切换镜像
通过切换npm或yarn 镜像至天梯私有库地址
$ npm config set registry http://ccp.tianti.tg.unicom.local/artifactory/api/npm/npm-virtual/安装依赖
$ npm install ruxd@1.0.12.3 配置主题
1、配置默认主题
通过umi配置文件可配置使用主题（config/config.js或.umirc.ts中）
import defaultTheme from 'ruxd/dist/default-theme';
export default {
...
theme:defaultTheme,
...
}2、配置其他主题，通过import 引用其他主题文件, -以公众中台为例：
import popTheme from 'ruxd/dist/pop-theme';
export default {
...
theme:popTheme,
...
}2.4 配置按需加载
通过umi配置文件配置组件按需加载（config/config.js或.umirc.ts中）
- 使用按需加载组件，默认引用政企中台规范主题，并支持通过theme改变主题色。
- 如果想使用antd默认样式，则不需要配置按需加载，且在全局less中引用css方式即可。
extraBabelPlugins: [
[
'import',
{
libraryName: 'ruxd',
libraryDirectory: 'lib',
style: true,
},a
"ruxd"
],
],2.5 使用
import React from 'react';
import { Button } from 'ruxd';
export default function Loading() {
return (
<div>
<Button type="primary">按钮</Button>
</div>
);
}组件实现功能
- 引用全部antd组件和自定义组件（封装了antd design pro V2组件）
- 组件库默认主题以及组件样式更改成政企中台规范样式，且满足各平台自定义
- 满足业务系统按需加载，且业务系统可通过umi 配置定制主题
参考文献
1.0.1
2 years ago