如何生成无需Node.js、可ES6引入的OpenAPI/Swagger静态JS客户端

1. 调整Gradle生成配置，直接输出浏览器兼容的ES6模块 #

你当前使用的javascript生成器默认输出Node.js风格的CommonJS模块，只需修改配置，指定生成ES6模块并适配浏览器环境：

openApiGenerate {
    generatorName = "javascript"
    inputSpec = "${projectDir}/src/[redacted]/api.json";
    outputDir = "${projectDir}/src/frontend/static/lib/apiClient"
    configOptions = [
            usePromises: 'true',
            emitModelMethods: 'true',
            outputFileSuffix: ".js",
            useES6: "true",
            moduleSystem: "es6", // 指定生成ES6 import/export语法的模块
            browser: "true" // 剔除Node.js专属依赖，适配浏览器环境
    ]
}

关键配置说明：

• moduleSystem: "es6"：替换默认的CommonJS，生成浏览器可识别的ES模块语法
• browser: "true"：自动移除http/https等Node.js专属模块依赖，改用浏览器原生的网络请求API

2. 直接在浏览器中引入使用 #

生成完成后，无需额外打包，即可在前端代码中通过ES6语法直接引入：

import { DefaultApi, Configuration } from './frontend/static/lib/apiClient/index.js';

// 配置API基础路径（对应你的SpringBoot服务地址）
const apiConfig = new Configuration({
    basePath: 'http://your-springboot-server:8080/api'
});

// 创建API客户端实例
const apiClient = new DefaultApi(apiConfig);

// 调用接口示例
apiClient.getSomeResource().then(res => {
    console.log('接口返回数据:', res.data);
}).catch(err => {
    console.error('请求失败:', err);
});

注意：HTML中引用你的前端脚本时，需要添加type="module"属性，让浏览器识别ES模块：

<script type="module" src="./your-main-script.js"></script>

3. 若需打包成单文件的解决方法 #

如果必须打包成单个静态文件，可按以下步骤配置browserify：

1. 进入生成的API客户端目录，初始化npm项目：

cd src/frontend/static/lib/apiClient
npm init -y

2. 安装打包依赖：

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

3. 执行打包命令，生成全局可访问的单文件：

browserify index.js -t [babelify --presets @babel/preset-env] -o api-client-bundle.js --standalone ApiClient

打包后可在浏览器中直接通过全局变量ApiClient访问：

const { DefaultApi, Configuration } = window.ApiClient;
// 后续用法同上

4. 备选方案：使用typescript-fetch生成器 #

如果上述配置仍有问题，可尝试typescript-fetch生成器，它默认基于浏览器原生fetch API生成ES模块，兼容性更好：

openApiGenerate {
    generatorName = "typescript-fetch"
    inputSpec = "${projectDir}/src/[redacted]/api.json";
    outputDir = "${projectDir}/src/frontend/static/lib/apiClient"
    configOptions = [
            usePromises: 'true',
            emitModelMethods: 'true',
            module: "es6",
            target: "es6"
    ]
}

生成后可直接在TypeScript项目中使用，也可通过tsc命令转译为纯JavaScript后在浏览器中引入。

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