如何基於引用導入/合並js文件

Question

在我的MVC 6應用中，要替換舊版js / css捆綁和縮小系統，我想生成1個可在HTML中引用的javascript文件。 此javascript文件是特定於頁面/操作的，因此我不能只合並文件夾中的所有.js文件。

使用CSS（使用LESS），我已經通過使用@import做到了這一點，然后，創建的.css文件將是原始.less文件加上所有合並為1個文件的導入的組合。 現在，我嘗試對.js文件執行相同的操作。

在GULP中，我可以輕松地縮小每個單獨的文件，並將它們放置在正確的文件夾中，但是我不知道如何將它們與正確的文件合並。 我不想為每個文件/ js創建一個gulp任務，告訴要連接什么。

我考慮過使用TypeScript引用其他js文件，然后使用GULP將它們編譯為一個文件，但這似乎有點困難。 我對其他也可以進行管理的框架持開放態度。

在打字稿中使用/// reference或import模塊實際上並不會像使用LESS那樣在編譯時導致導入。

因此，例如，考慮以下js 或typescript -structure

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)

Answer 1

這是一個有趣的設計。 實際上，這意味着我無法從瀏覽器緩存中受益匪淺，因為最終我下載了master.js三次（但以三個不同的文件）-而這僅僅是基於示例中的三個文件。

如果您有大量文件，請將所有內容保留為單獨的文件，並使用模塊加載器，例如RequireJS。 這樣， master.js會在第一頁之后緩存，並且只需要在下一頁上加載index.js （依此類推）。

如果沒有大量文件，請將它們捆綁到一個文件中，然后在頁面后期加載。

Answer 2

轉到解決方案資源管理器，右鍵單擊您的項目，然后單擊添加引用。

然后去瀏覽您的參考文件。 :)

對不起，英語不好！

Answer 3

找到了一種通過將http://browserify.org/與GULP結合使用來實現此目標的方法。 我可以在index.js中使用'require（'master.js'）'，然后browserify會將2個文件合並在一起。 這不是最簡單的任務，但它似乎可以按需工作。