如何解决capacitor-codepush集成到无构建工具纯JS Capacitor应用的报错

方案1：修复rollup打包配置（适合愿意引入轻量构建流程的场景） #

你遇到的IIFE格式报错是因为rollup当前配置触发了代码分割逻辑，IIFE/UMD格式不支持代码分割，按以下步骤修改配置即可：

• 安装必要的rollup插件，用来处理第三方依赖引入：

npm install @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-terser --save-dev

• 修改rollup.config.js配置为单文件输出，关闭代码分割：

import { defineConfig } from 'rollup';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';

export default defineConfig({
  input: '你的入口文件路径.js',
  output: {
    file: 'dist/codepush-bundle.js',
    format: 'iife',
    name: 'CapacitorCodePushBundle',
    globals: {
      '@capacitor/core': 'Capacitor'
    }
  },
  external: ['@capacitor/core'],
  plugins: [
    resolve({
      browser: true,
      preferBuiltins: false
    }),
    commonjs(),
    terser()
  ]
});

• 打包完成后，在你的HTML中直接引入生成的dist/codepush-bundle.js即可，全局可直接调用codePush对象。

方案2：无需构建，直接通过script标签引入（适合保持现有无构建流程的场景） #

你之前引入的acquisition-sdk.js是独立的模块文件，没有适配浏览器全局挂载的场景，所以就算引入也无法被插件识别，按以下顺序引入即可解决依赖缺失问题：

• 先引入code-push的完整UMD包（包含了acquisitionSdk依赖）：

<script src="node_modules/code-push/dist/code-push.min.js"></script>

• 再引入capacitor-codepush的插件文件：

<script src="node_modules/capacitor-codepush/dist/plugin.js"></script>

• 引入完成后，全局window.Capacitor.Plugins.CodePush就是可用的codepush实例，可直接调用相关API，示例代码如下：

// 页面加载完成后触发codepush同步
window.addEventListener('load', async () => {
  const codePush = window.Capacitor.Plugins.CodePush;
  await codePush.sync({
    installMode: 1 // 立即安装更新
  });
});

注意事项 #

• 引入顺序不能调换，必须先加载code-push基础包，再加载capacitor插件
• 请确保已经完成iOS/Android端的原生配置，包括添加codepush密钥到原生工程配置文件

内容的提问来源于stack exchange，提问作者Mark Fletcher