git 使用文档 | 组件库使用文档

组件库使用文档

项目结构

sdk/
 |-.husky
 |-.storybook
 |-dist/
 |-example/
   |-App.tsx
   |-main.tsx
 |-node_modules/
 |-packages/
   |-api/
     |-common
       |-base.api.ts
       |-base.model.ts
     |-panorama
       |-index.ts
       |-model.ts
     |-index.ts
   |-react-biz-components/
     |-PanoramaMap
       |-index.ts
       |-style.less
   |-react-components/
     |-Button
       |-index.ts
       |-style.less
   |-index.tsx
 |-public/
 |-stories/
   |-Button/
     |-Button.stories.tsx
 |-package.json
 |-index.html
 |-vite.config

| 目录/文件 | 作用介绍 | | ---------- | --------------------------- | | .storybook | 文档预览服务的配置文件 | | dist | 打包文件，上传到 npm 上的包 | | example | 开发组件挂在在 root | | packages | 需要开发的组件 | | stories | 需要生成预览文档的组件 |

组件开发

1、项目启动： npm run dev

2、预览：http://localhost:3000

3、App.tsx 中引入 packages 中开发的组件，example 中示例如下：

import React from 'react';
import { Button } from '../packages/index';
const Test = () => {
  return (
    <div>
      <Button label="按钮" primary></Button>
    </div>
  );
};

export default Test;

组件发布

1、执行npm run build打包文件

2、命令行使用npm login登录 npm

3、使用npm publish发布

package.json 上定义的基础入口信息和类型声明

  {
	  "name": "aiot-panorama-jssdk",
	  "private": false,
	  "version": "0.0.2",
	  "description": "React components",
	  "type": "module",
	  "keywords": [
		"react",
		"react-component"
	  ],
	  "files": [
		"dist"
	  ],
	  "main": "./dist/aiot-panorama-jssdk.umd.cjs",
	  "module": "./dist/aiot-panorama-jssdk.js",
	  "typings": "./dist/index.d.ts",
	  "exports": {
		".": {
		  "import": "./dist/aiot-panorama-jssdk.js",
		  "require": "./dist/aiot-panorama-jssdk.umd.cjs"
		},
		"./style.css": "./dist/style.css"
	  },
	  "repository": "",
	  "author": "gspace",
	  "license": "MIT"
  }

组件使用

安装

yarn add aiot-panorama-jssdk

使用

import { Button } from 'aiot-panorama-jssdk';
import "aiot-panorama-jssdk/style.css"

<Button label="按钮" primary></Button>

附：

storybook 中文使用文档

storybook 英文使用文档