react-bundle-page-widget

Bundle Page 页面组件库，对外打包导出 EBPage 组件，用于在 React 应用中渲染 Easy Bundle 购物车/商品组合页。

技术栈

• React 18 + TypeScript
• Vite 构建
• MobX 状态管理
• Sass 样式

安装

npm install react-bundle-page-widget

依赖要求（peerDependencies）

• react >= 16.8.0
• react-dom >= 16.8.0
• axios >= 0.26.0
• lodash-es >= 4.0.0

导出内容

组件

| 名称 | 说明 | |----------|------| | EBPage | 主页面组件，用于渲染 Bundle 购物车/商品列表页（支持店铺前台与 Admin 配置预览两种模式） |

类型（TypeScript）

从 react-bundle-page-widget 可一并导入所有配置与数据类型，例如：

• IAppProps - EBPage 的 props 类型
• IConfigProps - 完整配置类型
• IProductVariant、IProduct、IProductListProps - 商品/变体相关类型
• ConfigContent、ConfigSettings、ConfigRules 等配置结构

使用方式

1. 店铺前台模式（不传 props）

不传参时，EBPage 会从页面中的 easy-bundle-configs 脚本标签读取配置（由后端注入），并自动处理多语言、多市场货币等：

import { EBPage } from 'react-bundle-page-widget';

function App() {
  return <EBPage />;
}

2. Admin 配置预览模式（传入 props）

传入 IAppProps 时，作为 Admin 预览使用，直接使用传入的配置与商品列表，不再从 script 读取：

import { EBPage, IAppProps, IConfigProps, IProductListProps } from 'react-bundle-page-widget';

const props: IAppProps = {
  config: yourConfig as IConfigProps,  // 完整配置
  other: yourOtherConfig,              // 可选，店铺/货币等
  productList: yourProductList as IProductListProps[],  // 可选，商品列表
};

function AdminPreview() {
  return <EBPage {...props} />;
}

本地开发与打包

# 安装依赖
npm install

# 本地开发（默认 Vite 开发服务器）
npm run dev

# 打包为可嵌入的 IIFE（输出到 dist/，含独立 JS + CSS）
npm run build

# 打包为 ES 模块库（导出 EBPage，输出到 widget/）
npm run build:widget-production   # 生产环境
npm run build:widget-test         # 测试环境

构建产物说明

| 命令 | 输出目录 | 说明 | |------|----------|------| | npm run build | dist/ | IIFE 单文件 + CSS，用于通过 <script> 直接嵌入页面 | | npm run build:widget-production | widget/ | ES Module 库（index.es.js + 类型声明），供 npm 安装或模块化引用 EBPage |

库构建时会将 react、react-dom、lodash-es、axios 视为 external，使用方需自行提供。

项目结构概览

src/
├── index.ts              # 入口：导出 EBPage 及类型
├── main.tsx              # EBPage 实现（App 组件）
├── api/                  # 接口请求（商品、变体等）
├── assets/               # 全局样式
├── components/           # 通用 UI 组件
├── page/                 # 页面级组件（ThemeA、ThemeAByAdmin、Cart 等）
├── store/                # MobX 状态
├── types/                # 类型定义（config.d.ts）
└── utils/                # 工具函数

发布与部署

• npm 发布：npm run release（会先执行 build，再按 release-it 配置打 tag、发布）
• Cloudflare Pages：
  • 测试：npm run deploy:test
  • 生产：npm run deploy:prod

License

ISC