edge-design - 锋线 React 基础组件库

开发

文档

• 安装与使用

• 组件书写规范

• 文档书写规范

• 替换 antd

命令

• compile：构建 edge-design 组件库 lib  和 es  部分。使用 gulp  打包
• dist：构建 edge-design 组件库的 dist  部分。基于compile 命令生成的 lib  使用 webpack  构建 dist
• build：构建 edge-design 组件库 package。调用了 compile  和 dist  命令，生成的 package 会在 CI/CD 中 publish，项目安装的 edge-design 内就是这个 package
• gen-comp：生成新组件目录的命令行工具
• rm-comp：移除组件目录的命令行工具

上述均为可在组件库项目（packages/edge-design 目录下）中单独执行的命令，其中compile、dist、build在 incisive-edge lerna 总线项目中实现了批量处理，gen-comp和rm-comp仅支持在组件库项目下执行

预览

http://vrnode:8890

安装

更新 npm@7

更新 npm 到 7.0 以上版本：

# 必要情况加sudo
npm i npm@7 -g

和之前版本不同，npm@7 会对依赖版本进行严格检查，并且会自动安装 peerDependencies，项目中如保留了 npm@7 的 package-lock.json，使用之前版本的 npm 进行安装会出现 peerDependencies 声明的依赖找不到的情况，这是有两种方法：1. 升级到 npm@7 后安装 2. 删除 package-lock.json 重新安装。强烈建议采用第 1 种方法解决

切换 npm 源

检查.npmrc是否复制到项目根目录，如没有可从react-cli中复制。也可以直接切换本地 npm 源到内部源

npm config set registry http://vrnode:4000/

安装 edge-design

安装前需要清楚项目内是否安装了 antd4.x，为保证项目中不会存在多个 antd4.x 版本，如有安装，请先卸载。

npm uninstall edge-design

npm i edge-design

edge-design 目前使用的是 16.x 版本 react，如果项目中使用 17.x 版本的 react 可能出现安装失败的情况，这是因为 npm@7 会对依赖版本进行检查，依赖版本不一致会导致安装失败。这时请耐心检查，通过对相关依赖进行升、降级处理完成安装。或者执行：

// 不推荐的写法，使用后检查到不同版本依赖会全部安装
npm i edge-design -f

安装完成后，查看 package.json，可以看到：

"edge-design": "^0.1.7"

在开发过程中，会不断更新小版本，根据 Semantic Versioning 2.0.0 语义化版本规范，需将 edge-design 的依赖版本描述更改为：

// "edge-design": "^ 0.1.7"
"edge-design": "~0.1.7"

也可以在安装 edge-design 前手动在 package.json 的 denpendencies 中键入上面的描述，再重新 npm i。

使用

前置

项目中使用 edge-design 推荐将组件和样式前缀更改为'edge'替代 antd 的'ant'，这样在使用和覆盖样式时可以保持一致性。可通过以下步骤进行更改：

• 在入口文件中通过 ConfigProvider 组件将前缀名更改为'edge'
• 在 webpack.common.js 中将样式前缀也更改为了'edge'
• 提供的通用提示方法使用了 edge-design 的 message，由于调用不在ConfigProvider上下文中，因此单独在对应文件中配置了前缀 'edge-message'

完成安装

引入

edge-design 组件的引入和 antd 整体一致，在 webpack 中使用了相应 loader 实现了按需加载，为了保持风格的一致性，禁止从单个组件目录中引入组件本体和本体样式。为了便于 tree-shaking 的优化，请从edge-design/es/**路径引入，避免从edge-design/lib/**中引入。edge-design 和 antd 使用的不同是，一些 edge-design 继承自 antd 组件的属性、方法或类型接口的引入在实现时被忽略了，这时只需要从 antd 中引入即可。

// 从edged中引入组件本体
import { Button, Space, EdgeMixinSelector, EdgeTimeroutine } from 'edge-design';
// 引入属性、方法或类型接口
import { defaultValueMap } from 'edge-design/es/edge-timeroutine';
import { durationDefaultValue, TimeroutinePattern } from 'edge-design/es/edge-timeroutine/utils';
// 从_utils中获得支持
import { BaseJson } from 'edge-design/es/_utils';
import { Tree, TreeJson, TreeNode } from 'edge-design/es/_utils/tree';
// 允许从antd中获取属性、方法或类型接口
import { ColumnType, Key, SorterResult, TablePaginationConfig } from 'antd/es/table/interface';
import { getColumnKey, getColumnPos } from 'antd/es/table/util';
// 禁止直接从组件目录中引入组件和样式
// import Table from 'edge-design/es/table';
// import 'edge-design/es/table/style';

示例

import React from 'react';
import { Watermark } from 'edge-design';


function App() {
  return (
    <div className="App">
      <Watermark content="中移VR创新中心"/>
    </div>
  );
}

export default App;