如何将 Swagger 生成的代码与 webpack 捆绑在一起 [英] How to bundle Swagger generated code with webpack
问题描述
我正在创建一个需要使用 REST API 与服务器通信的新 web 应用程序.我想使用 Swagger 来定义 REST API 并为服务器和 Javascript 客户端(一个在浏览器中运行的简单 web 应用程序)生成代码.
I'm creating a new webApp that needs to communicate with the server using a REST API. I want to use Swagger to define the REST API and to generate the code for the server and the Javascript client (a simple webapp running in a browser).
我能够实现服务器(使用 Java servlet)并且它可以工作.
I was able to implement the server (using a Java servlet) and it works.
我已经为 Javascript 客户端生成了代码，但我无法让它工作(我是 Javascript、webpack、nom...的初学者).
I have generated the code for the Javascript client but I'm not able to make it works (I'm a very beginner in Javascript, webpack, nom...).
我想使用 webpack 生成将由 webapp 加载的 .js 文件，该 .js 将包含 swagger 生成的代码和我使用 Swagger 发送查询的代码(...和 UI！).
I want to use webpack to generate a .js file that will be loaded by the webapp, this .js will contain the code generated by swagger and my code to send the query using Swagger (... and a 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 命令时出现一些错误:
When I execute the webpack command I get some errors:
./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} [内置]
Hash: a77095b323ec225f9b17 Version: webpack 2.6.1 Time: 396ms Asset Size Chunks Chunk Names bundle.js 6.48 kB 0 [emitted] main [0] ./src/index.js 2.61 kB {0} [built] [1] ./src/main.js 212 bytes {0} [built]
./src/index.js 模块中的错误未找到:错误:无法解析'ApiClient' 中'/Users/sebastien/Documents/Javascript/Stackoverflow/superagenttest/src'@ ./src/index.js 17:4-86 @ ./src/main.js
ERROR in ./src/index.js Module not found: Error: Can't resolve 'ApiClient' in '/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
ERROR in ./src/index.js Module not found: Error: Can't resolve 'model/Error' in '/Users/sebastien/Documents/Javascript/Stackoverflow/superagenttest/src' @ ./src/index.js 17:4-86 @ ./src/main.js
我的 main.js 包含以下内容:
My main.js contains the following:
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 生成，包含)
index.js (generated by Swagger contains)
(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 生成的代码?
How can I make webpack generating a bundle.js that will successfully contain the code generated by Swagger and and my main.js ?
我迷失了 import/require... 我试图用一些 import 替换 require() 但没有任何成功(或者它可以读取 index.js 但随后在 index.js 中发现问题，因为它不能导入 ApiClient.js).Swagger生成的代码中提到的AMD和CommonJS应用是什么?
I'm lost with import/require... I have tried to replaced the require() with some import but without any success (or it can read the index.js but then find issues in index.js because it cannot import the ApiClient.js). What is AMD and CommonJS application are mentioned by the code generated by Swagger?
任何帮助将不胜感激;-)谢谢，
Any help would be appreciated ;-) Thanks,
塞巴斯蒂安
推荐答案
我找到了一个解决方案，我需要在我的 webpack.config.js 中添加以下内容
I found a solution, I need to add the following in my 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
I found this fix in the swagger-codegen GitHub repository: https://github.com/swagger-api/swagger-codegen/issues/3336
这篇关于如何将 Swagger 生成的代码与 webpack 捆绑在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
