React 组件 React-component

通过 Five 的 React API 来创建 react 组件 你可以对组件功能进行抽象，作为公共组件发布

插件的作用

1. 组件可以置入 FiveProvider 中来控制对应的 five 实例
2. 可以创作集成了 Five 控制 以及 UI 空间的抽象功能

创建单独发布的 React 组件

mkdir a-five-react-component
npm init -y
npm install @realsee/five
npx five-react-component-init
Copy

项目目录

.
├── README.md
├── devtools
│   ├── external-five.js
│   ├── external-react.js
│   ├── external-three.js
│   ├── tsconfig.build.json
│   ├── webpack.bundle.js
│   └── webpack.example.js
├── docs
├── examples
│   ├── data.json
│   ├── index.html
│   └── index.tsx
├── lib
│   └── index.tsx
├── package.json
└── tsconfig.json
Copy

npm script

• example： 开发环境，编译 example 下的 index.ts, 监听变化，并且开启端口监听，可以通过 localhost:8080 访问
• build:doc: 通过 typedoc 生成项目文档，生成目标在 docs 目录下
• build:typescript: 通过 tsc 编译 ts 代码，生成目标在 build 目录下
• build:bundle: 通过 webpack 编译 unpack 包， 生成目标在 bundle 目录下
• build:all: npm run build:doc && npm run build:typescript && && npm run build:example && npm run build:bundle

编译配置

编译配置均在 devtools 目录下， 可以自行修改配置

• ts 的编译参数在 devtools/tsconfig.build.json 下
• bundle 的 webpack 配置在 devtools/webpack.bundle.js 下

发布

• 往 npm 发布，默认发布的入口文件在 build/index.js, 即通过 tsc 编译得到的代码。你可以在 package.json 中修改。
• bundle 包发布，可以直接使用 build:bundle 生成的结果。

简单例子

todo