Question

在一个Angular风格的应用程序中，我希望打字稿文件捆绑在一起，基本上都是在应用程序启动时加载的。在MVC类型的应用程序（每页的视图，而不是SPA）中，我希望只加载该页面的打字稿。我不想加载与该页面无关的打字稿。

我将我的打字稿分成单独的文件（基本上每个文件一个类）。然后我在文件中设置import / export子句来引用这些类。我认为当我使用外部库（jquery等）时，这种方法会更好。如果我使用命名空间，稍后当我去使用第三方库时，我认为它不会起作用。

但是，这意味着我需要查看某种装载机。如果我有很多小打字稿文件，我不一定知道所有文件何时加载，然后再尝试使用它们，这就是需要js照看的东西。我没有使用网络包，但我认为它也有同样的事情吗？

但这意味着我需要为每个MVC页面配置一个requirejs配置，这似乎不是很有效。我应该采取什么方法来加载特定MVC页面所需的所有打字稿文件，记住我最终会得到几十个MVC页面？

Answer 1

现在（2021 年）有部分解决方案可以解决这个问题。我不确定它是否“高效”，但它确实在不同的 MVC 页面上加载了多个 Typescript 文件。

如果您更改打字稿配置以输出 ES6 模块，tsc 将为每个 TS 文件创建一个 JS 文件，每个文件都在一个 ES6 模块中。如果然后使用模块脚本标记，浏览器将根据需要导入文件

<script src="scripts/modules/start.js" type="module"></script>

<!-- and/or -->

<script type="module">
import { loadStats } from 'pages/homepage.js'

<!-- note that this is JavaScript -->
loadStats();
<script>

这确实要求用户使用现代浏览器：https://caniuse.com/es6-module

这不是灵丹妙药 - 有很多问题和解决方法，其中一个重要问题是 import 语句必须采用 JavaScript 模块样式，而不是 TS 样式

import { loadStats } from 'pages/homepage'    // <-- Will not work at runtime
import { loadStats } from 'pages/homepage.js' // <-- Use this style.  Note the JS extension

因为 tsc 没有正确转换导入语句。这应该指向 TS 文件（因为创建的 JS 文件将具有相同的相对路径），出于智能和编译的目的，Visual Studio 似乎能够应对。

我们设法让 npm 用于打字，但在其他包上挣扎。不过，我们已经能够通过这种方式将 typescript 改造成旧的 MVC 应用程序（我们希望/需要对 API 调用进行类型检查）。

在ASP.NET MVC页面中有效加载多个Typescript文件的最佳方法。

1 个答案: