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

. Каждая папка будет скомпилирована в один файл с использованием свойства entry в webpack.config.js.Это означает, что приведенная выше структура будет скомпилирована в dist / test [.min] .js.Это хорошо.Проблема в том, что я не знаю, как напрямую вызывать такую ​​функцию, как SDK.Test.Form.onLoad (), потому что веб-пакет производит некоторый дополнительный код в виде:

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

В случае, если веб-пакет не может вызвать напрямую,у вас есть какой-либо другой способ вызова SDK.Test.Form.onLoad ()?

Answer 1

Полагаю, что когда вы говорите о вызове SDK.Test.Form.onLoad(), вы имеете в виду, что хотите позвонить из глобальной области.

Вы можете использовать опцию UMD webpack + library. Это откроет переменную в глобальной области действия точка входа export . Например:

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

Этот конфиг будет выставлять объект myLib (что его значением является экспорт точки входа) в глобальную область.

Для получения дополнительной информации вы можете прочитать: https://webpack.js.org/configuration/output/#expose-a-variable