Javascript 编译后如何调用模块中函数的网页

我正在使用Typescript组织Javascript代码。文件夹结构如下所示

// helper.ts
export function GetMessage() {
    return "From helper";
}

// form.ts
namespace SDK.Test {
    export class Form {
        onLoad () {
            console.log(GetMessage());
        }  
    }
}

每个文件夹都将使用webpack.config.js中的entry属性编译成一个文件。这意味着上述结构将被编译成dist/test[.min].js。它做得很好。问题是我不知道如何直接调用SDK.Test.Form.onLoad（）之类的函数，因为webpack会生成一些额外的代码，如下所示：

src
    --test
    ----form.ts
    ----helper.ts

---

如果webpack无法直接调用，您有没有建议使用其他方法调用SDK.Test.Form.onLoad（）？

我猜当您指的是调用

SDK.Test.Form.onLoad（）

时，您的意思是希望从全局范围调用

您可以使用webpack+library的

UMD

选项。 这将在入口点导出的全局范围内公开一个变量。 例如：

/******/ (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

此配置将在全局作用域上公开myLib对象（其值是入口点的导出）

---

有关更多信息，请阅读：

我切换到rollupjs，通过使用webpack，我们需要在输出中指示全局范围，如果我有很多文件，输出将意外增长。谢谢@felixmosh

module.exports = {
  // ...
  output: {
    library: 'myLib',
    libraryTarget: 'umd',
    filename: 'myLib.js',
  }
};