如何基于引用导入/合并js文件

How to import/merge js files based on references

本文关键字：合并 js 文件导入何基于引用更新时间：2023-09-26

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

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

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

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

在typescript中，使用///引用或导入模块在编译时并不像使用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)

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

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

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

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

然后去浏览你的参考文件。：）

sry英语不好！

找到了一种通过使用http://browserify.org/GULP。我可以在我的index.js中使用"require（'master.js'）"，browserfy会将这两个文件连接在一起。这不是一项最简单的任务，但它似乎如所愿。