是否可以在同一个 Typescript 项目中混合 AMD 和 CommonJS 模块答案

【问题标题】：Is it possible to mix AMD and CommonJS modules within same Typescript project是否可以在同一个 Typescript 项目中混合 AMD 和 CommonJS 模块
【发布时间】：2014-04-18 06:22:53
【问题描述】：

我正在尝试使用 Typescript 将 Durandal 与 node.js 服务器集成，以便在服务器端和客户端定义模块。

我遇到的问题是 Durandal 强烈依赖 RequireJS 和 AMD 定义模块的风格，我不想在服务器端引入，而且由于它使用 RequireJS 我没有任何机会运行 CommonJS客户端上的 -ish 模块（node.js 的默认值）。

棺材上的最后一个钉子是，我发现无法定义哪些文件应编译为 AMD 模块，哪些文件应由 tsc 编译为 CommonJS - 这似乎是一个最简单的解决方案。

我不认为将客户端部分和服务器部分分开是一种选择，因为很多代码对于这两个部分都是通用的。

所以，我的问题有三个：

有没有办法在同一个 Typescript 项目中混合 AMD 和 CommonJS 模块（最好使用 NodejsTools）
如果没有，有没有办法强制 Durandal 使用 CommonJS 文件来加载视图/视图模型等等
如果这一切都不可能，是否可以（并且明智）在 node.js 服务器上使用 AMD 模块

非常感谢任何想法

【问题讨论】：

标签： node.js typescript durandal amd commonjs

【解决方案1】：

有没有办法在同一个 Typescript 项目中混合 AMD 和 CommonJS 模块（最好使用 NodejsTools）

是的。使用grunt-ts。请参阅https://github.com/basarat/demo-fullstack/tree/master/src 特别是 gruntfile 通用文件：https://github.com/basarat/demo-fullstack/blob/master/src/Gruntfile.js#L4-L6commonjs：https://github.com/basarat/demo-fullstack/blob/master/src/Gruntfile.js#L26amd：https://github.com/basarat/demo-fullstack/blob/master/src/Gruntfile.js#L37

【讨论】：

注意：我刚刚更新了那个演示，让它变得更棒了

【解决方案2】：

这更像是一个长评论而不是一个答案

我一直在研究同样的问题，我确实尝试了 grunt-ts、gulp-ts、Webstorm 文件观察器、cmd 行脚本、除 Visual Studio 之外的所有东西，因为我害怕依赖 IDE 进行构建进程（Webstorm watchers 是一个例外，因为它与 grunt 或任何其他 watcher 相同，易于复制，并且很方便尝试配置）；我目前正在使用内部模块，但只编译带有文件过滤器的“导出”模块（基于扩展，更干净）并且 tsc 在它们被引用时加载链；

根据我想要实现的目标，我有不同的输出目标，如节点、浏览器、角度、测试、摩卡、茉莉等......

喜欢：

/MyModule
myModule.ts
myModule.d.ts
myModule.mdl.ts (exports amd)
myModule.export.ts (exports commonjs)
myModule.test.ts (exports mocha test, no KARMA!)
etc...

不依赖 Ts '导出模块'能力

它有效但是... 但我不是 100% 高兴，对很多文件....闻起来...太多目标 Gruntfile 很难阅读（太大），我需要记住或记录它是如何工作的，直到我有时间完全自动化它（如果可能的话）

我认为以下选项对 DRY 和 KISS 意义更有意义但我也不是 100% 出售所需的样板。

Typescript 模块应该是可模板化的，因此当它们编译模块时可以具有我想要的“形状”，而无需依赖额外的构建步骤

一些不需要编译多个目标或文件复制的选项

UMD (Universal Module Definition)

Browserify

amdefine

RequireJs in Node

Requirejs LOADING MODULES FROM COMMONJS PACKAGES

【讨论】：

【解决方案3】：

应该可以混合基于需要的 AMD 文件和常见的 js。然后，您的 html 页面将包含类似于以下内容的脚本：

<script src="/tscode_common/common_js_file.js"></script>
<script data-main="/tscode_amd/tscode_amd_config.js" type="text/javascript" src="lib/require.js"></script>

但特定的 TypeScript 项目只能是 AMD 或普通 js - 因为编译器选项是每个项目的。
解决此问题的方法可能是将 TypeScript 子项目 (.prj) 嵌套在主 Web 应用程序的子目录中，如下所示：

+- / (base directory for web application )
+- /main_app.prj ( main web app project file )
+- index.html
+- /tscode_common/ ( put all common js files here )
+- /tscode_common/common_js.prj ( project file with commonjs options)
+- /tscode_common/common_js_file.ts (common ts files )
+- /tscode_amd/ ( put all amd files here )
+- /tscode_amd/amd_js.prj ( project file with amd options )
+- /tscode_amd/tscode_amd_config.ts ( require config file )
+- /tscode_amd/amd_js_file.ts ( amd ts files )

【讨论】：

【解决方案4】：

只需创建 2 个 *.njsproj 文件的副本。一份用于服务器，一份用于客户端代码。在客户端项目中只保留public 和view（排除与服务器相关的所有内容）。在服务器端项目中只保留与服务器相关的内容。确保客户端的项目有 AMD，而服务器的项目有 CommonJs。享受吧！

【讨论】：