web_design

构建依赖

使用 npm install 或 yarn

$ npm install

or

$ yarn

启动开发环境

$ npm start

or

$ yarn start

文档网站编译

$ npm run docs:build

or

$ yarn docs:build

运行单元测试

$ npm test

or

$ yarn test

如果只想运行指定组件的单元测试文件

## 这里不一定是index.test.tsx文件，也可以是其他符合.test.tsx单元测试规范的文件
$ npm test 组件名/index.test.tsx

or

$ yarn test 组件名/index.test.tsx

构建组件库模块

$ npm run build

or

$ yarn build

本地工程引入

需要打开工程所在文件夹位置，先使用 build 指令进行组件库构建。
之后输入 link 指令，将组件库关联到本地 npm。

$ npm link

or

$ yarn link

打开需要引入组件库的工程所在位置。
使用 link 指令，引入 web_design 组件库。

$ npm link web_design

or

$ yarn link web_desgin

即可在工程中使用 web_design 组件库。

import { EllipsisSpan } from 'web_design/es/index';

export default () => <EllipsisSpan width={80} value={'雨是最寻常的，一下就是三两天。'} />;

则本地编译时候，需要保持 link 状态。

下载依赖导入

进入使用 npm 下载 web_design 依赖

$ npm install @weblife-wei/web_design

or

$ yarn add @weblife-wei/web_design

import { EllipsisSpan } from '@weblife-wei/web_design/src';

export default () => <EllipsisSpan width={80} value={'雨是最寻常的，一下就是三两天。'} />;

Markdown 入门开发

网站组件库文档开发主要围绕则 Markdown 文件进行，则需要熟练掌握 Markdown 文档。

Markdown 中文 API 网站：http://markdown.p2hp.com/index.html

npm发布的注意点

1. 需要将package.json文件中的name修改为：@weblife-wei/web_design；

2. 每次发布需要将package.json中的version版本更新；