@activity-maker/activity-maker-shell NPM

activity-maker-shell

此项目是搭建平台 H5 页面壳应用，用于进行页面的基础渲染

开发事项

API

必须要暴露以下三个 API 给上层的构建脚本

/**
 * 生成组件列表
 * @param packages 依赖列表：['@xmc/image-container@2.6.0', '@xmc/actionspot@0.3.0']
 */
export declare function generateModuleEntry(packages: string[]): void;

/**
 * 渲染 HTML 文本
 * @param props builder 透传数据
 * @returns HTML 的文本内容
 */
export declare function renderAppToHtml({
  activity,
  inputHtml,
}: BuilderProps): string;

/**
 * 各种路径
 */
export declare const paths: {
  /** 客户端文件的入口 */
  appIndexJs: string;
  /** 打包后的代码 */
  appDist: string;
  /** node_modules */
  appNodeModules: string;
  /** HTML 模板的路径 */
  appHtml: string;
  /** 项目根路径 */
  appPath: string;
  /** 动态模块的入口文件路径 */
  appModuleJs: string;
};

/**
 * builder 的透传参数
 */
interface BuilderProps {
  /** 活动信息 */
  activity: ActivityDetail<Draft>;
  /** 输入的 HTML 文本 */
  inputHtml: string;
}

注意点

src/server 目录下存放的是用于服务端渲染的代码，通常情况下不需要改动
src/index.tsx 是客户端渲染的入口
src/server/renderer.tsx 是同构渲染的入口，需要同时在浏览器和 Node.js 环境下执行

打包

由于整个页面实际上还要在服务器上用 webpack 进行一次最终的打包，所以这个模块的构建产物实际上只需要是能被 Node.js(>=14.15.0) 理解的 CommonJS 格式就行，不需要进行太多的转换

更新组件开发工具

@xmly/activity-maker-shell 是搭建发布页面的外壳（如：全局基础逻辑等），而本地调试时，这些全局的壳逻辑放置在 packages/component-scripts/web/ 目录下。两者需要保持一致，因此，关键性的逻辑有更新时，需要一起修改。

@xmly/activity-maker-shell 是后来重构的最新代码，因此与 packages/component-scripts/web/ 的逻辑编写并不完全一致，理论上，我们最正确的做法是 ☞ 引入 @xmly/activity-maker-shell，替换 component-scripts/web 壳逻辑。