如何将 Swagger 生成的代码与 webpack 捆绑在一起

Question

我正在创建一个需要使用 REST API 与服务器通信的新 webApp。我想使用 Swagger 来定义 REST API 并为服务器和 Javascript 客户端（一个在浏览器中运行的简单 web 应用程序）生成代码。

我能够实现服务器（使用 Java servlet）并且它可以工作。

我已经为 Javascript 客户端生成了代码，但我无法让它工作（我是 Javascript、webpack、nom... 的初学者）。

我想使用 webpack 生成一个将由 webapp 加载的 .js 文件，这个 .js 将包含由 swagger 生成的代码和我使用 Swagger 发送查询的代码（......和一个 UI！） .

这是我的项目组织：

/
 - package.json
 - node_modules (modules installed with npm)
 - src  
   ---> /main.js (code I have written to send the REST API query using Swagger generated code)  
   ---> /index.js (code generated by Swagger)  
   ---> /ApiClient.js (code generated by Swagger)  
   ---> /api (folder that contains code generated by Swagger)  
   ---> /model (folder that contains code generated by Swagger) 
 - webpack.config.js
 - runTest  ---> - bundle.js (generated by webpack)  ---> - index.html

当我执行 webpack 命令时出现一些错误：

./node_modules/.bin/webpack --config webpack.config.js

哈希： a77095b323ec225f9b17 版本：webpack 2.6.1 时间：396ms 资产大小块块名称 bundle.js 6.48 kB 0 [emitted] main [0] ./src/index.js 2.61 kB {0} [built] [1] ./src/main.js 212 字节 {0} [内置]

./src/index.js 中的错误未找到模块：错误：无法解析 'ApiClient' 在 '/Users/sebastien/Documents/Javascript/Stackoverflow/superagenttest/src' @ ./src/index.js 17:4-86 @ ./src/main.js

./src/index.js 中的错误未找到模块：错误：无法解析 '模型/错误' '/Users/sebastien/Documents/Javascript/Stackoverflow/superagenttest/src' @ ./src/index.js 17:4-86 @ ./src/main.js

我的 main.js 包含以下内容：

var MyMetadataApi = require('./index'); // See note below*.
var xxxSvc = new MyMetadataApi.defaultApi(); // Allocate the API class we're going to use.
var zzz = xxxSvc.myFieldsGet(); // Invoke the service.

index.js（由 Swagger 生成包含）

(function(factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['ApiClient', 'model/Error', 'model/MyField', 'api/DefaultApi'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS-like environments that support module.exports, like Node.
    module.exports = factory(require('./ApiClient'), require('./model/Error'), require('./model/MyField'), require('./api/DefaultApi'));
  }
}(function(ApiClient, Error, MyField, DefaultApi) {
  'use strict';

  /**
   * get_My_fields.<br>
   * The <code>index</code> module provides access to constructors for all the classes which comprise the public API.
   * <p>
   * An AMD (recommended!) or CommonJS application will generally do something equivalent to the following:
   * <pre>
   * var MyMetadataApi = require('index'); // See note below*.
   * var xxxSvc = new MyMetadataApi.XxxApi(); // Allocate the API class we're going to use.
   * var yyyModel = new MyMetadataApi.Yyy(); // Construct a model instance.
   * yyyModel.someProperty = 'someValue';
   * ...
   * var zzz = xxxSvc.doSomething(yyyModel); // Invoke the service.
   * ...
   * </pre>
   * <em>*NOTE: For a top-level AMD script, use require(['index'], function(){...})
   * and put the application logic within the callback function.</em>
   * </p>
   * <p>
   * A non-AMD browser application (discouraged) might do something like this:
   * <pre>
   * var xxxSvc = new MyMetadataApi.XxxApi(); // Allocate the API class we're going to use.
   * var yyy = new MyMetadataApi.Yyy(); // Construct a model instance.
   * yyyModel.someProperty = 'someValue';
   * ...
   * var zzz = xxxSvc.doSomething(yyyModel); // Invoke the service.
   * ...
   * </pre>
   * </p>
   * @module index
   * @version 1.0.0
   */
  var exports = {
    /**
     * The ApiClient constructor.
     * @property {module:ApiClient}
     */
    ApiClient: ApiClient,
    /**
     * The Error model constructor.
     * @property {module:model/Error}
     */
    Error: Error,
    /**
     * The MyField model constructor.
     * @property {module:model/MyField}
     */
    MyField: MyField,
    /**
     * The DefaultApi service constructor.
     * @property {module:api/DefaultApi}
     */
    DefaultApi: DefaultApi
  };

  return exports;
}));

如何让 webpack 生成一个 bundle.js，它会成功包含 Swagger 和我的 main.js 生成的代码？

我迷失了 import/require... 我试图用一些 import 替换 require() 但没有任何成功（或者它可以读取 index.js 但然后在 index.js 中找到问题，因为它不能导入 ApiClient.js)。 Swagger 生成的代码中提到的 AMD 和 CommonJS 应用是什么？

任何帮助将不胜感激 ;-) 谢谢，

塞巴斯蒂安

Answer 1

我找到了解决方案，我需要在我的 webpack.config.js 中添加以下内容

module: {
  rules: [
    {
      test: /my_client\/.*\.js$/,
      use: 'imports-loader?define=>false'
    }
  ]
},
node: {
  fs: 'empty'
}

我在 swagger-codegen GitHub 存储库中找到了此修复程序：https://github.com/swagger-api/swagger-codegen/issues/3336