Question

我是浏览器开发的新手，所以我以前没有AMD，CommonJS，UMD，Browserify，RequireJS等经验。我一直在阅读很多关于它们的内容，我相信我通常了解JavaScript的故事，但我仍然很困惑如何让一切都在一起工作。

我有一个用TypeScript编写的库。它是纯粹的TypeScript库，它不与浏览器或任何浏览器框架交互，也不与任何节点或NPM交互。

我还有一个利用此库的TypeScript客户端应用程序。客户端应用程序也可以利用Web框架（例如，jQuery）。

现在当我编译我的两个TypeScript文件（我们假设它们是在单独的项目中，彼此隔离并单独构建）时，每个文件都会生成一个.js文件。在Visual Studio中，我必须选择AMD或Common作为我的模块加载器。

这是事情崩溃的地方。我的研究告诉我，如果我想在网上工作，我需要使用Browserify或RequireJS。 Browserify似乎要求我首先在我的机器上安装Node，然后使用命令行工具作为生成后步骤来生成文件，据我所知，这不能作为NuGet包使用。或者，我可以使用RequireJS但是然后所有示例都停止工作。关于不在窗口加载而不是在其他地方做某事的事情，但我发现的任何事情都没有解释得那么好。

那么，这里的故事是什么？我想使用TypeScript，但目前它真的感觉它只是一种语言，作为开发人员，我没有任何引人注目的用法故事可供我在微软生态系统中习惯使用。

Answer 1

TypeScript确实像JavaScript一样支持AMD和CommonJS。但另外它也支持internal modules。当将内部模块与像gulp-typescript这样体面的构建系统结合使用时，您会发现内部模块可以涵盖许多用例，在传统的JavaScript项目中会选择AMD / CommonJS。

TypeScript让您自由决定自己。如果需要异步模块加载，可以通过外部模块自由使用AMD。您还可以使用CommonJS和/或使用browserify将您的代码链接到一个文件中。

我发现当你是一名图书馆开发人员时 - 你将TypeScript编译的JS代码发送给其他开发人员 - 内部模块是一个很好的折衷方案。您不会强迫目标受众（开发人员）使用任何特殊的模块系统，如AMD / CommonJS，而是运送在浏览器和节点中运行的同构JS。然而，您仍然可以在内部模块化代码，就像AMD / CommonJS允许的那样。

TL; DR：当您使用TypeScript时，您可以免费获得内部模块，它们为您提供了只有AMD / CommonJS才能实现的灵活性。然而外部模块仍然有其优势。最后，您应该确定最适合您项目的内容。

Answer 2

TypeScript是JavaScript的超集，因此它的故事是JS的故事，而不是.NET或任何其他Microsoft产品。

如果您将TypeScript模块编译为AMD，那么您可以通过入口点HTML文件中的RequireJS（或Dojo或curl）之类的AMD模块加载器加载它们，这可以像这个（使用RequireJS）：

<!DOCTYPE html>
<title>Application name</title>
<script src="scripts/require.js" data-main="scripts/client"></script>

（假设您构建的TypeScript模块为scripts/client.js。）

Start page for RequireJS或Dojo Introduction to AMD modules都是可以告诉您更多有关如何在浏览器中加载AMD格式模块的资源。

Answer 3

你从C Snover得到了一个非常好的技术答案，但你实际上正在寻找的答案是“不要使用外部模块＆＃34;”。通过外部模块，我的意思是＆＃34; AMD＆＃34;或＆＃34; CommonJS＆＃34;模块。

如果您确实需要外部模块提供的内容，它们可能非常有用，但在构建/部署复杂性和您需要理解的概念方面，它们的成本显着。

仅仅因为外部模块更复杂并不意味着它们更好; TypeScript编译器本身是使用内部模块编写的。

您可以通过省略模块本身的任何导出语句（并且在文件末尾没有export =语句）将外部模块转换回内部模块。例如，这是一个内部模块：

module MyLibrary {
  export class MyClass {
    public Foo = 1;    
  }
}

如果您正在使用内部模块，您所要做的就是通过HTML文件中的脚本标签以正确的顺序引用它们，它们无需处理任何类型的加载器系统即可工作。

<script src="MyLibrary.js"></script>
<script src="MyUICode.js"></script>

什么是TypeScript在浏览器中的模块化故事？

3 个答案: