使用 ASP.NET MVC 捆绑和缩小模块化 JavaScript (RequireJS / AMD)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11585774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bundling and minifying modular JavaScript (RequireJS / AMD) with ASP.NET MVC
提问by kendaleiv
Does anyone have any experience with or know any good solutions for bundling and minifying modular JavaScript like RequireJS / AMD in an ASP.NET MVC project?
有没有人有任何经验或知道在 ASP.NET MVC 项目中捆绑和缩小模块化 JavaScript(如 RequireJS / AMD)的任何好的解决方案?
Is the best way to use the RequireJS optimizer(perhaps in a post build action?) -- or is there something better out there for ASP.NET MVC?
是使用RequireJS 优化器的最佳方法(也许在构建后操作中?)——或者对于 ASP.NET MVC 有更好的方法吗?
回答by Jeff Shepler
I think the problem you'll hit is if you used anonymous defines. If you want a combined/bundled script file that contains all your defines, you'll have to name them.
我认为你会遇到的问题是如果你使用匿名定义。如果您想要一个包含所有定义的组合/捆绑脚本文件,则必须为它们命名。
eg.
例如。
define("someModule", ["jquery", "ko"], function($,ko) { ... });
instead of
代替
define(["jquery", "ko"], function($,ko) { ... });
If you use the file names as the module names, you'll be able to load them asynchronously (not bundled) as well as preloaded (bundled). That way you can work in debug mode as well as release mode without having to change your requires.
如果您使用文件名作为模块名称,您将能够异步加载它们(未捆绑)以及预加载(捆绑)。这样您就可以在调试模式和发布模式下工作,而无需更改您的需求。
I have no experience with the RequireJS optimizer to know if it takes care of anonymous defines or not.
我没有使用 RequireJS 优化器的经验,不知道它是否处理匿名定义。
UPDATE:
更新:
I recently had to do this and one of the problems I ran into was the data-main attribute of the script tag loading require.js. Since the main.js file had dependencies on the bundled modules, they need to be loaded before main.js but after require.js. So I had to ditch data-main and load that file (unbundled) last.
我最近不得不这样做,我遇到的问题之一是加载 require.js 的脚本标记的 data-main 属性。由于 main.js 文件依赖于捆绑模块,因此它们需要在 main.js 之前加载,但在 require.js 之后加载。所以我不得不放弃 data-main 并最后加载该文件(未捆绑)。
from
从
<script src="../JS/require-v2.1.2.js" type="text/javascript" data-main="main.js"></script>
to
到
<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>
I haven't looked, but if the bundle configuration could ensure main.js is last, then wouldn't even need that last script tag.
我没看过,但如果捆绑配置可以确保 main.js 是最后一个,那么甚至不需要最后一个脚本标签。
回答by zacharydl
These are the steps to get RequireJS bundled with main.js. You can get down to one line in the <head>
tag. This does not address the issue with anonymous defines.
这些是将 RequireJS 与 main.js 捆绑在一起的步骤。您可以在<head>
标签中找到一行。这并没有解决匿名定义的问题。
HTML
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 must work without data-main(I needed to set baseUrl)
main.js 必须在没有 data-main 的情况下工作(我需要设置 baseUrl)
require.config({
baseUrl: "scripts"
});
回答by Razvan Dumitru
I know this is an old question, but you can take a look at RequireJS.NET Compressor (uses YUI compressor, not ASP.NET bundling - at least for the moment) which is part of RequireJS.NET NuGet package.
我知道这是一个老问题,但您可以查看 RequireJS.NET Compressor(使用 YUI 压缩器,而不是 ASP.NET 捆绑 - 至少目前),它是 RequireJS.NET NuGet 包的一部分。
References:
参考:
Compressor - http://requirejsnet.veritech.io/compressor.html
压缩机 - http://requirejsnet.veritech.io/compressor.html
General Documentation - http://requirejsnet.veritech.io/
一般文档 - http://requirejsnet.veritech.io/
Github Project - https://github.com/vtfuture/RequireJSDotNet
Github 项目 - https://github.com/vtfuture/RequireJSDotNet
回答by McKay
I'm not sure if this is an acceptable solution or not, but Visual Studio 2012 has a NuGet package (Microsoft.Web.Optimization) which supports native minification and bundling. I'm not sure if it's available for 2010
我不确定这是否是可接受的解决方案,但 Visual Studio 2012 有一个 NuGet 包 (Microsoft.Web.Optimization),它支持本机缩小和捆绑。我不确定它是否适用于 2010 年
It's one line of code in application_start
这是 application_start 中的一行代码
Microsoft.Web.Optimization.BundleTable.Bundles.EnableDefaultBundles();
http://msdn.microsoft.com/en-us/vs11trainingcourse_aspnetandvisualstudio_topic5
http://msdn.microsoft.com/en-us/vs11trainingcourse_aspnetandvisualstudio_topic5