taro-blended-components

基于 Taro 4 + React + TypeScript + Less。本项目主要用途是：把 src 里的组件编译成可嵌入宿主的原生组件（微信小程序一套、H5 一套），构建结束后由 plugin-mv 把产物拷到同工作区内的宿主工程。

环境要求

• Node.js（建议 LTS）
• 推荐使用 pnpm（与仓库脚本一致）

pnpm install

编译成组件：在做什么

1. 在 src/app.config.ts 的 components 里登记要输出的组件路径（与 Taro「原生组件 / blended」约定一致）。
2. 执行下方 组件构建脚本，Taro 会以 native-components + --blended 模式按平台产出到 dist/。
3. plugin-mv 在构建完成钩子中读取同一份 components 列表，把文件同步到宿主目录（路径写在 plugin-mv/index.js 的 projects 里，可按本机调整）。

流程图

┌─────────────────┐ │ src 组件源码 │ └────────┬────────┘ ↓ ┌─────────────────────────┐ │ app.config.ts │ │ components 列表 │ └────────┬────────────────┘ ↓ ┌─────────────────┐ │ 组件构建 │ └────────┬────────┘ ↓ ┌─────────────────┐ ┌─────────────────┐ │ weapp 原生组件 │ │ H5 原生组件 │ │ 产物 │ │ 产物 │ └────────┬────────┘ └────────┬────────┘ ↓ ↓ └──────────┬───────────┘ ↓ ┌─────────────────┐ │ plugin-mv │ │ 构建结束 │ └────────┬────────┘ ↓ ┌─────────────┴─────────────┐ ↓ ↓ ┌─────────────────┐ ┌─────────────────┐ │ 微信小程序宿主 │ │ H5/React 宿主 │ │ components/ │ │ src/components/ │ │ taro-components │ │ taro-components │ └─────────────────┘ └─────────────────┘s

脚本（组件）

| 脚本 | 说明 | |------|------| | pnpm build:weapp-component | 小程序侧原生组件：taro build native-components --type weapp --blended | | pnpm build:h5-component | H5 侧：taro build native-components --type h5 --blended | | pnpm build:all-components | 先 weapp 再 h5，一次出两端组件 |

默认同步目标（可在 plugin-mv/index.js 修改）：

• weapp：gift-customer-wx-miniapp 下 components/taro-components 等。
• h5：my-mor-react 的 src/components/taro-components 等。

文档

• Taro 多端编译
• 原生小程序项目使用 Taro（混合）