// helper.ts
export function GetMessage() {
return "From helper";
}
// form.ts
namespace SDK.Test {
export class Form {
onLoad () {
console.log(GetMessage());
}
}
}
我正在使用 Typescript 来组织 Javascript 代码。文件夹结构如下
src
--test
----form.ts
----helper.ts
每个文件夹将通过使用 webpack.config.js 中的 entry 属性编译成一个文件。也就是说上面的结构会被编译成dist/test[.min].js。它做得很好。问题是我不知道如何直接调用像 SDK.Test.Form.onLoad() 这样的函数,因为 webpack 会产生一些额外的代码:
/******/ (function(modules) { // webpackBootstrap
....
/******/ })
/************************************************************************/
/******/ ({
/***/ "./src/test/form.ts":
/*!*******************************************!*\
!*** ./src/test/form.ts ***!
\*******************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var helper_1 = __webpack_require__(/*! ./helper */ "./src/test/helper.ts");
var SDK;
(function (SDK) {
var Test;
(function (Test) {
var Form;
(function (Form) {
function onLoad() {
console.log(helper_1.GetMessage());
}
Form.onLoad = onLoad;
})(Form= Test.Form|| (Test.Form = {}));
})(Test = SDK.Test|| (SDK.Test= {}));
})(SDK = exports.SDK || (exports.SDK = {}));
/***/ }),
/***/ "./src/test/helper.ts":
/*!*********************************************!*\
!*** ./src/test/helper.ts ***!
\*********************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function GetMessage() {
return "From helper";
}
exports.GetMessage = GetMessage;
/***/ })
/******/ });
//# sourceMappingURL=taitest.js.map
在webpack不能直接调用的情况下,有什么推荐的SDK.Test.Form.onLoad()调用方式吗?
最佳答案
我想当你提到调用 SDK.Test.Form.onLoad()
时,你的意思是你想从全局范围调用。
您可以使用 webpack + library 的 UMD
选项。
这将在入口点导出 的全局范围内公开一个变量。
例如:
module.exports = {
// ...
output: {
library: 'myLib',
libraryTarget: 'umd',
filename: 'myLib.js',
}
};
此配置将在全局范围内公开 myLib 对象(其值是入口点的导出)。
有关更多信息,您可以阅读:https://webpack.js.org/configuration/output/#expose-a-variable
关于javascript - webpack编译后如何调用模块中的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55059254/