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

组件库发布

1. 首先检查npm的源，源需要是https://registry.npmjs.org/，

检查源
$ npm config get registry   

设置源
$ npm config set registry https://registry.npmjs.org/

2. 登录npm.js

$ npm login

3. 发布注意事项
   需要将package.json文件中的name修改为：@weblife-wei/web_design
   每次发布需要将package.json中的version版本更新 \

4. 补充
   npm publish发布的时候，npmjs需要验证2FA，如果不想验证，需要用 “精细化访问令牌” 免输验证码。
   步骤 1：生成 npm 精细化访问令牌
   电脑登录 npm 官网：https://www.npmjs.com/
   点右上角头像 → Access Tokens → Generate New Token
   Token name：随便填（如 publish-web_design）
   Expiration：选有效期（推荐 90 天，更安全）
   配置权限（关键）：
   找到 Packages → 点 Read and write， 选择 All packages 或者 选择一个对应的项目
   务必开启：Bypass 2FA（绕过 2FA 验证，这是免输验证码的核心）
   点 Generate Token → 复制生成的令牌（⚠️ 只显示一次，务必保存！）\

步骤2：

# 把令牌配置到 npm
npm config set //registry.npmjs.org/:_authToken=你的精细化令牌

# 直接发布包（无需输账号、密码、2FA 验证码）
npm publish

本地工程引入

需要打开工程所在文件夹位置，先使用 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