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 +库的UMD选项。这将在入口点导出的全局范围内显示一个变量。例如：

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

此配置将在全局范围内公开myLib对象（其值是入口点的导出）。

有关更多信息，您可以阅读：https://webpack.js.org/configuration/output/#expose-a-variable

Webpack编译后如何在模块中调用函数

1 个答案: