组件开发指南

阅读时间约 4 分钟

ICE 工程

一码多端组件开发基于 iceworks, 可以在 iceworks 初始化的组件或者物料集上进行能力升级，亦或者内网同学走 def 流程创建

初始化

iceworks

iceworks 详细初始化文档请参考: https://appworks.site/materials/guide/component.html

iceworks 初始化一个组件项目

	// 创建物料文件夹
	$ mkdir my-materials && cd my-materials

	// 初始化物料项目
	$ iceworks init

安装

	// 一码多端插件
	npm i build-plugin-one-code-for-components --save-dev

	// 无线组件包
	npm i @alifd/meet-react --save

配置一码多端 build.json

{
  "library": "test-component",
  "libraryTarget": "umd",
  "oneCode": true,// 开启一码多端
  "disableGenerateStyle": true,
  "plugins": [
    "build-plugin-component",
    "build-plugin-one-code-for-components"// 一码多端插件
  ]
}

引入 mobile 目录新增 mobile 入口，无线的调试和发包都会走 mobile 这个目录

	src/mobile/index.(j|t)sx
	src/mobile/index.css

demo 文档引入样式

本地调试的时候，pc 和无线会丢失样式，需要再 demo 文档中引入，也可以按需引入对应主题文件

// 引入next样式（非css变量， css变量请引入 next.var.css）
import '@alifd/next/dist/next.css';
// 引入 meet-react样式
import '@alifd/meet-react/dist/meet-react.min.css';

走 def 流程

def 工程研发平台上已上架一码多端组件模板，可在组件/模块 - tnpm 下，通过自定义模板 ("CONE 一码多端组件模板") 初始化

开发、调试

mobile 下可使用 next 和 meet-react 组件，可混用，调试和打包都会转成 meet-react demo 文档 pc 和无线公用一套，无需单独创建

本地启动

npm run start

本地调试地址

// pc调试地址
http://localhost:3333

// mobile调试地址
http://localhost:3333/demo/mobile
// mobile 单页调试地址： http://localhost:3333/{demoName}
http://localhost:3333/usage

调试界面截图

无线调试: undefined

PC 调试: undefined

申通

参考自定义 cone 搭建组件流程: https://design.sto.cn/vision/4Yk0gCNSXpu9Jdbb

组件初始化

// 单包模板
tnpx -p @alicd/cone-cli cone init --sto --template @stofe/cone-component

// 多包模板
tnpx -p @alicd/cone-cli cone init --sto --template @stofe/cone-component-multi

// 执行安装命令
snpm install

// 执行运行命令
snpm run start

组件调试

安装无线组件库

npm install @alifd/meet-react --save-dev

开启一码多端打包

修改配置后重新 start

// build.json 增加配置
{
  "oneCode": true,
  ...
}

默认组件模板只有 pc 的 md 文件，可以再 demo 下面增加一个 xxx-mobile.md，来专门测试无线组件

目前组件预览还不能直接通过 chrome 浏览器进行 pc 无线切换，只能单独增加无线文档。

无线 demo 的引入方式

// 单包的形式
const CustomButtonMobile = window['oc-test']?.default;

// 多包的形式, key 和 src/mobile/index.js中export的key一致
const { Button: CustomButtonMobile } = window['oc-test'] || {};

一个无线的 md 实例如下：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const CustomButtonMobile = window['oc-test']?.default;

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    if (!CustomButtonMobile) return '请在无线模拟器上访问';

    console.log('CustomButtonMobile: ', CustomButtonMobile);
    return <CustomButtonMobile />;
  }
}

ReactDOM.render(<App />, mountNode);

组件预览 PC: undefined

H5: undefined