如何将capacitor-community/http示例编译为独立压缩JS文件

• 使用browserify时报错的原因：browserify默认以CommonJS模块规则解析目标文件，遇到ESModule语法的import语句时会触发解析失败，需要配套轻量转译插件才能识别这类语法
• 使用esbuild时报错的原因：测试文件仅使用副作用导入import '@capacitor-community/http'时，不会把包导出的Http对象引入当前作用域，后续代码直接调用Http.request时，解析器找不到Http的定义，就会抛出语法错误

全程不需要搭建完整的前端构建管线，只需要修正测试文件写法、执行单次打包命令就能生成可直接引入的独立JS文件

第一步：修正测试文件（test.js）的导入逻辑 #

把原来错误的副作用导入换成结构化导入，保证Http对象在当前文件作用域内可访问，示例写法：

// 正确导入Http对象到当前作用域
import { Http } from '@capacitor-community/http';

// 把从官方示例抄的请求逻辑放在这里
async function sendCustomRequest(options) {
  const ret = await Http.request(options);
  return ret;
}

// 把方法挂载到全局，方便应用里的其他脚本直接调用
window.sendCustomRequest = sendCustomRequest;

第二步：执行打包命令生成独立文件 #

两种工具二选一即可，不需要额外生成配置文件

方案A：用esbuild打包（速度更快，无额外依赖） #

文件修正后，直接执行下面的命令即可解决之前的解析报错：

./node_modules/.bin/esbuild test.js --bundle --format=iife --outfile=out.js

参数说明：

• --bundle：把所有依赖的包代码全部打进最终的out.js里，不需要额外引入其他依赖文件
• --format=iife：把打包后的代码包成立即执行函数，生成的文件可以直接作为普通JS脚本在HTML里引入，不需要加type="module"属性适配

方案B：用browserify打包（匹配原有操作习惯） #

因为browserify默认不识别ESModule语法，需要先安装两个轻量转译依赖：

npm install --save-dev @babel/core @babel/preset-env babelify

依赖装完后执行打包命令，所有转译参数直接在命令行传入，不需要额外生成配置文件：

browserify test.js -o out.js -t [ babelify --presets [ @babel/preset-env ] ]

第三步：引入验证 #

把生成的out.js文件直接在HTML入口里通过<script src="out.js"></script>引入，打开应用控制台就能直接调用window.sendCustomRequest方法，和官方示例的调用逻辑完全一致，包内部的Capacitor桥接逻辑会自动和已有的Capacitor运行时打通，不需要额外适配。

• 禁止仅使用import '@capacitor-community/http'这类副作用导入，这类写法只会执行包的初始化逻辑，不会把Http对象暴露到当前作用域，必须通过结构化导入把需要的对象引入文件作用域
• 需指定esbuild的输出格式为iife，若使用默认的ESModule格式生成文件，直接在普通script标签里引入会触发CORS报错，加对应参数后无需额外加type="module"属性即可正常加载
• 现有可正常运行的Capacitor应用无需为桥接逻辑做额外打包配置，包内部的桥接代码会自动和现有Capacitor运行时打通

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