使用 RequireJs 时未从 Html 调用 Typescript 函数答案

【问题标题】：Typescript function not called from Html while using RequireJs使用 RequireJs 时未从 Html 调用 Typescript 函数
【发布时间】：2020-04-25 21:23:43
【问题描述】：

我正在尝试使用 RequireJs 在 Html 中加载 Typescript 函数。我在类型脚本中创建了一个简单的 Alert 函数，如下所示，它似乎没有被调用。这应该很简单，但我尝试了所有基本检查，但不确定缺少什么。

事件处理程序.ts：

export function Main() 
{
    alert("Hi");

 }

Eventhandler.js：

define(["require", "exports"], function (require, exports) 
{
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    function Main() {
        alert("Hi");
    }
    exports.Main = Main;
});

tsconfig.json：

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": true,
    "module": "AMD",
    "target": "es5",
    "outDir": "../appscriptJS"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

需要配置的主js文件是app.js。

app.ts:

/// <reference path="../scripts/typings/requirejs/require.d.ts" />
require.config(
{
    baseUrl: './appscriptJS',
    paths: { jQuery: '../scripts/jquery-3.4.1.min.js' }
});

require(['EventHandler'], function(app){ app.Main();});

各自的js文件，app.js：

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    function Main() {
        alert("Hi");
    }
    exports.Main = Main;
});

HTML 页面： ``` 输入您的手机号码：

<div><span id="message"></span></div>
<input type="button" class="btn-default" id="submit" value="Submit" />

<script data-main="app.js" src="~/Scripts/require.js"></script>

```

【问题讨论】：

标签： node.js angularjs typescript requirejs node-modules

【解决方案1】：

修复非常简单。 require js api中的data main属性不会在requirejs配置文件中给出的base url中搜索。

所以，只好在html的脚本中给出app js文件的完整路径如下：

<script data-main="../appscriptJS/app.js" src="~/Scripts/require.js"></script>

【讨论】：