enos-dpl
## Features - 提供基本功能组件和通用业务组件 - 多语言功能支持 - 使用less编写样式
Last updated a year ago by envision-tc .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install enos-dpl 
SYNC missed versions from official npm registry.

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.mdindex.en-US.md,分别填写组件的中英文说明,可参考已有格式。文件最上方需要填写组件文档的描述字段,如需新增categorytype类型,需要在站点配置中增加额外配置,请联系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';
  1. 涉及颜色,大小等参数变更,统一提取变量至components/style/themes/default.less,具体用到的地方引入主题文件,如:
@import "../../style/themes/default";
  1. 如需使用其他组件中的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.mdCHANGELOG.en-US.md,具体可参考已有格式。

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

npm run build

发布至npm

npm run pub

DPL Site

站点开发

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

npm run site-start

站点发布

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

npm run site-build

Icon

  • DPL的iconfont挂载在DPL站点下的Icon分类,使用者可根据需要下载不同分类的Icon,通过webpack或其他方式集成到自己的项目中

  • DPL使用的iconfont位于根目录下的iconfont文件夹,按分类存放,其中common目录下为DPL的基础Icon。新增或更新已有分类的Icon时,可覆盖此路径下的对应文件,并通过指令更新DPL站点下的icon。之后再重新构建并发布站点

npm run update-iconfont

Current Tags

  • 0.5.7                                ...           latest (a year ago)

1 Versions

  • 0.5.7                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (9)
Dev Dependencies (94)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |