使用ASP.NET MVC捆綁和縮小模塊化JavaScript（RequireJS/AMD）

有沒有人有任何經驗或知道在ASP.NET MVC項目中捆綁和縮小模塊化JavaScript（如RequireJS/AMD）的任何優秀解決方案？使用ASP.NET MVC捆綁和縮小模塊化JavaScript（RequireJS/AMD）

是否使用RequireJS optimizer（可能在後期構建操作中？）的最佳方式 - 或者ASP.NET MVC中有更好的方法嗎？

2012-07-20 kendaleiv

由於AMD的做法在很大程度上依賴於腳本加載其他腳本，我相信你最好的選擇是無論是獨立運行如下每個腳本（沒有捆綁），或者實際上，可以使用RequireJS優化器，其嘗試檢測模塊的夾雜物，並相應地捆綁。 – Avish 2012-07-20 21:08:32

我不確定這是否是可接受的解決方案，但Visual Studio 2012有一個支持本地縮小和捆綁的NuGet包（Microsoft.Web.Optimization）。我不知道它是否提供了2010

這是一個代碼行中的Application_Start

Microsoft.Web.Optimization.BundleTable.Bundles.EnableDefaultBundles();

http://msdn.microsoft.com/en-us/vs11trainingcourse_aspnetandvisualstudio_topic5

來源

2012-07-20 20:38:53 McKay

該B/M鏈接已過時。見我的B/M教程http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification – RickAndMSFT 2012-07-22 19:52:44

@RickAndMSFT啊，是的，謝謝。 – McKay 2012-07-23 14:28:30

我想你會打的問題是，如果你使用的匿名定義。如果您想要一個包含所有定義的組合/捆綁腳本文件，則必須命名它們。

例如。

define("someModule", ["jquery", "ko"], function($,ko) { ... });

代替

define(["jquery", "ko"], function($,ko) { ... });

如果您使用的文件名作爲模塊名，你就可以異步加載它們的（非綁定），以及預裝（捆綁）。這樣，您就可以在調試模式以及發佈模式下工作，而無需更改您的需求。

我對RequireJS優化器沒有經驗知道它是否處理匿名定義。

UPDATE：

最近，我不得不這樣做，很可能會遇到的問題之一是腳本代碼加載require.js的數據主要屬性。由於main.js文件依賴於捆綁的模塊，因此需要在main.js之前加載，但在require.js之後加載。所以我不得不拋棄data-main並且最後加載那個文件（unbundled）。

從

<script src="../JS/require-v2.1.2.js" type="text/javascript" data-main="main.js"></script>

到

<script src="../JS/require-v2.1.2.js" type="text/javascript"></script> 
<%: System.Web.Optimization.Scripts.Render("~/bundles/signup") %> 
<script src="main.js" type="text/javascript"></script>

我還沒有看，但如果束配置可以確保main.js是最後的，那麼甚至不需要去年腳本標籤。

來源

2012-11-13 21:59:47

您可以通過使用'BundleConfig.cs'，看到我的回答如下得到那些三線向下一個。我認爲BundleTables是MVC 4中的新增功能。 – zacharydl 2014-03-22 00:57:58

這些是獲取與main.js捆綁的RequireJS的步驟。您可以在<head>標記中找到一行。這並沒有解決匿名定義的問題。

HTML

<head runat="server"> 
    <title></title> 
    <%: System.Web.Optimization.Scripts.Render("~/bundles/scripts") %> 
</head>

BundleConfig.cs

using System.Web; 
using System.Web.Optimization; 

public class BundleConfig 
{ 
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862 
    public static void RegisterBundles(BundleCollection bundles) 
    { 
     bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
        "~/scripts/libs/require.js", 
        "~/scripts/main.js")); 
    } 
}

爲主。JS必須努力without data-main（我需要設置的baseUrl）

require.config({ 
    baseUrl: "scripts" 
});

來源

2014-03-22 00:54:56 zacharydl

除了除了main.js和require.js以外的其他任何東西都沒有捆綁在一起，所以其他依賴項的加載方式與之前的方式相同：file by file。這不是有效的，你不會注意到在你有很多的依賴關係（你只保存1個文件加載）真實的場景的差異。 – 2015-05-20 14:39:42

在我的場景中，這會加快初始負載的速度。由於它是一個單頁面應用程序，因此我確實希望RequireJS稍後一次加載其他所有內容。 – zacharydl 2015-05-26 20:03:18

@myka EYL - 你可能是正確的扎克的例子範圍窄。但是他所演示的，我可能會補充一點，就是你在捆綁配置中指定的一個或多個捆綁要求。在大多數情況下，我遇到過我會爲我的外部庫（jquery，knockout等）創建一個包，並通過require引用那些包。我會在下面發佈一個例子。 – pimbrouwers 2016-09-17 19:42:59

我知道這是一個老問題，但你可以看看RequireJS.NET壓縮機（使用YUI壓縮機，而不是ASP.NET捆綁 - 至少目前）是RequireJS.NET NuGet包的一部分。

參考文獻：

壓縮機 - http://requirejsnet.veritech.io/compressor.html

一般文獻 - http://requirejsnet.veritech.io/

Github上項目 - https://github.com/vtfuture/RequireJSDotNet

的NuGet - https://www.nuget.org/packages/RequireJsNet/

來源

2015-06-04 10:28:55