如何根据引用导入/合并 js 文件答案

【问题标题】：How to import/merge js files based on references如何根据引用导入/合并 js 文件
【发布时间】：2015-11-25 07:13:25
【问题描述】：

在我的 MVC 6 应用程序中，作为旧 js/css 捆绑和缩小系统的替代品，我想生成 1 个可以在我的 HTML 中引用的 javascript 文件。此 javascript 文件是特定于页面/操作的，因此我不能将所有 .js 文件连接到一个文件夹中。

使用 CSS（使用 LESS）我已经通过使用 @import 设法做到这一点，创建的 .css 文件将是原始 .less 文件加上所有导入合并到 1 个文件中的组合。现在我正在尝试对我的 .js 文件做同样的事情。

在 GULP 中，我可以轻松地缩小每个单独的文件，并将它们放在正确的文件夹中，但我不知道如何将它们与正确的文件合并。我不想为每个文件/js 创建一个 gulp 任务来告诉要连接什么。

我曾想过使用 TypeScript 来引用其他 js 文件，然后使用 GULP 将它们编译到一个文件中，但这似乎有点困难。我对其他可以管理此问题的框架持开放态度。

在 typescript 中使用 ///reference 或导入模块在编译时实际上并不会像使用 LESS 那样导致导入。

例如，考虑以下js 或typescript-结构

scripts/common/master.js (or .ts etc.)
scripts/maincontroller/index.js (uses master.js)
scripts/maincontroller/support.js (uses master.js)

desired result after compile/merge/concat with gulp:

wwwroot/js/common/master.js (unchanged because nothing referenced)
wwwroot/js/maincontroller/index.js (concat with master.js)
wwwroot/js/maincontroller/support.js (concat with master.js)

【问题讨论】：

标签： javascript asp.net-mvc visual-studio typescript gulp

【解决方案1】：

这是一个有趣的设计。这实际上意味着我没有从浏览器缓存中获得太多好处，因为我最终下载了 master.js 三次（但在三个不同的文件中） - 这只是基于您示例中的三个文件。

如果您有大量文件，请将所有文件保存为单独的文件并使用模块加载器，例如 RequireJS。这样，master.js 在第一页之后被缓存，他们只需要在下一页加载index.js（以此类推）。

如果您没有大量文件，请将它们捆绑到一个文件中并在页面后期加载。

【讨论】：

好吧，如果您同时访问索引和支持，您将加载主部分两次，这是真的。但这总是在捆绑文件时发生，尽管 index.js 和 support.js 本身会被缓存。我觉得使用 require.js 会为每个 index.js 等添加很多额外的代码。
捆绑文件时，您不会在每个页面上重新加载脚本 - 捆绑文件被提取一次，然后被缓存。使用 RequireJS 将需要零额外代码。编译时以 AMD 或 UMD 模块为目标，输出将为您正确翻译。当 ECMAScript 模块到达时，您只需切换模块类型，浏览器就会执行模块加载。
是的，这就是我的意思，捆绑文件被提取一次并缓存，但是每页有 1 个（部分不同）捆绑文件，所以在每个不同的页面上，必须加载一个新的包.我会研究 requirejs 看看我是否可以让它工作:)
顺便问一下，我从您那里得到的是，捆绑实际上在性能方面会适得其反？所以我通常应该尽量避免它以启用单独文件的缓存。
如果将所有内容捆绑到一个文件中，效果会非常好（直到文件变得对于这种技术来说太大，就像 som 1M 行的 TypeScript 应用程序一样）。如果你创建了很多小包，你实际上会被夹在小型应用程序的“正确”答案（一个大包）和大型应用程序的“正确”答案（根据需要异步加载模块）之间。

【解决方案2】：

转到解决方案资源管理器并右键单击您的项目，然后单击添加引用。

然后去浏览您的参考文件。 :)

抱歉英语不好！

【讨论】：

不是添加对项目的引用，而是将js代码导入其他js文件。

【解决方案3】：

找到了一种通过将http://browserify.org/ 与 GULP 结合使用来实现此目的的方法。我可以在我的 index.js 中使用 'require('master.js')'，browserify 会将这两个文件连接在一起。不是最简单的任务，但它似乎可以按预期工作。

【讨论】：