EnOS DPL

Features

• 提供基本功能组件和通用业务组件
• 多语言功能支持
• 使用less编写样式

Installation

npm install @enos/dpl --save

Usage

直接引入使用，更多使用说明可参见DPL主站点

import { Input } from '@enos/dpl';

ReactDOM.render(<Input placeholder="Basic usage" />, mountNode);

Development

• Fork DPL的master分支
• 在项目根目录下的components目录中，以组件名建立组件目录，命名建议简短清晰，能清楚描述组件功能
• 在组件目录下增加组件主入口文件，命名为index.js，在此export组件；增加style文件夹统一放置样式文件，并在其下新增index.js，在此引入组件涉及的样式文件，同时在此建立index.less，作为组件的主样式入口
• 在组件目录下增加文件index.zh-CN.md和index.en-US.md，分别填写组件的中英文说明，可参考已有格式。文件最上方需要填写组件文档的描述字段，如需新增category或type类型，需要在站点配置中增加额外配置，请联系DPL的Owner

示例：

---
category: Components // 说明文档的大分类，对组件而言都填写'Components'
subtitle: 输入框 // 组件在站点中的补充说明副标题，一般中文文档中需要填写
type: Data Entry // 组件的分类
title: Input // 组件在站点中显示的主名称
---

• 在组件目录下建立demo文件夹，在此编写组件的示例代码，可参考已有格式。文件最上方需要填写Demo的基本属性和中英文说明

示例：

---
order: 0 // Demo在文档中的顺序，按从小至大排序
title: // Demo的标题
  zh-CN: 基本
  en-US: basic
---

## zh-CN // Demo的中文简介

最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。

## en-US // Demo的英文简介

The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.

• 可在项目根目录下的demo目录中，以组件名建立开发调试用demo，并在root.js中引入该demo，以Input组件为例，引入方式如下：

const demoMap = {
  ...
  Input: asyncComponent(() => import('./input')),
  ...
};

• 可启动开发调试服务，用于开发组件

npm start

• antd组件样式的修改规范

1. 首先引入已有组件的样式，可用~表示node_modules目录，如：

@import'~antd/lib/input/style/index.less';

2. 涉及颜色，大小等参数变更，统一提取变量至components/style/themes/default.less，具体用到的地方引入主题文件，如：

@import "../../style/themes/default";

3. 如需使用其他组件中的mixin，需要单独引入，如：

@import '../../input/style/dpl-mixin.less';

• 开发完成后，可编写测试用例，放置于组件目录下的__tests__目录下，并运行测试，测试通过后方可提交PR

npm test

• 组件开发和测试完成后，发起PR，等待DPL的Owner进行Merge

Release

登录npm

如未登录过，使用指定账号登录公司内部npm

npm login

修改版本号和编写更新说明

发布前务必填填写好版本号和更新说明

• 提升package.json中的版本号version，版本号遵循Semantic Versioning 2.0.0语义化版本规范。

• 更新说明填入项目根目录下的CHANGELOG.zh-CN.md和CHANGELOG.en-US.md，具体可参考已有格式。

编译代码，生成各组件独立代码和整体打包代码

npm run build

发布至npm

npm run pub

DPL Site

站点开发

站点代码位于项目根目录下的site文件夹，同样基于DPL的组件开发，可在项目内通过如下指令启动站点的开发调试

npm run site-start

站点发布

通过如下指令构建站点代码，将输出至根目录下的_site目录，发布此目录即可

npm run site-build