javascript - webpack编译后如何调用模块中的函数

Question

// 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()调用方式吗？

Answer 1

我想当你提到调用 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