使用ASP.NET MVC打包和压缩模块化JavaScript（RequireJS / AMD）

Question

使用ASP.NET MVC打包和压缩模块化JavaScript（RequireJS / AMD）

javascriptasp.net-mvcrequirejs

34

有没有人在ASP.NET MVC项目中使用过RequireJS / AMD这样的模块化JavaScript来打包和压缩？是否了解任何好的解决方案？

最好的方法是使用RequireJS优化器（或许在构建后执行？）还是有更好的解决方案适用于ASP.NET MVC？

- kendaleiv

由于AMD方法在很大程度上依赖于加载其他脚本的脚本，我认为你最好的选择是单独压缩每个脚本（不进行捆绑），或者确实使用RequireJS优化器，它会尝试检测模块包含并相应地进行捆绑。 - Avish

3个回答

2

这是使用RequireJS打包main.js的步骤。您可以在<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"));
   }
}

main.js必须在没有data-main的情况下工作（我需要设置baseUrl）（参考链接）

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

- zacharydl

除了主要的main.js和require.js之外，您不会捆绑任何其他内容，因此任何其他依赖项将以与以前相同的方式加载：逐个文件。这并不有效，您在具有许多依赖项的实际情况下不会注意到任何差异（您只能节省1个文件加载）。 - Micaël Félix

在我的情况下，这会稍微加快初始加载速度。由于它是单页应用程序，我实际上希望RequireJS以后逐个加载其他所有内容。 - zacharydl

@myka eyl - 在Zach的例子中，你可能是正确的。但他所展示的，我认为非常漂亮，就是如何将require与捆绑配置中指定的一个或多个捆绑程序连接起来。在我遇到的大多数情况下，我会为我的外部库（例如jquery、knockout等）创建一个bundle，并通过require在生产中引用这些库。我会在下面发布一个示例。 - pim

0

我不确定这是否是一个可接受的解决方案，但是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

- McKay

1

那个B/M链接已经过时了。请查看我的B/M教程http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification - RickAndMSFT

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeff Shepler · Accepted Answer

我认为你可能会遇到的问题是使用了匿名定义。如果你想要一个合并/打包的脚本文件，其中包含所有的定义，你就必须给它们命名。

例如：

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

而不是

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

如果您使用文件名作为模块名，您将能够异步加载它们（未捆绑）以及预加载它们（捆绑）。这样，您可以在调试模式和发布模式下工作，而无需更改您的 requires。

我没有使用 RequireJS 优化器的经验，因此不知道它是否处理匿名定义。

更新：

最近我必须这样做，我遇到的问题之一是加载 require.js 的脚本标签的 data-main 属性。由于 main.js 文件依赖于捆绑的模块，因此它们需要在 require.js 之后但在 main.js 之前被加载。所以我放弃了 data-main 并且最后加载了该文件（未捆绑）。

来自：

<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在最后，则甚至不需要最后的脚本标记。