MPM*_*MPM 9 javascript asp.net-mvc requirejs bundling-and-minification
我有两个问题.
我正在尝试学习RequireJS并将其与ASP.NET MVC捆绑和缩小一起使用.我正在为RequireJS使用一个单独的配置文件来保存捆绑信息.我的第一个问题是如何将MVC生成的包路径传递给require.config.js文件.干净的方法如下:
index.cshtml
<script id="requirescript" type="text/javascript" src="~/Scripts/require.config.js"
data-baseurl="@Url.Content("~/Scripts")"
data-bundlepath="@System.Web.Optimization.Scripts.Url("~/bundles/scripts").ToString()"></script>
require.config.js
var reqScript = document.getElementById('requirescript');
var baseUrl = reqScript.getAttribute('data-baseurl');
var bundlePath = reqScript.getAttribute('data-bundlepath');
var require = {
baseUrl: baseUrl,
bundles: {
bundlePath : ['jquery','jqueryui','mymodule']
}
}
};
当我执行上述操作时,RequireJS尝试加载一个名为bundlePath.js的不存在的脚本,而我想要的是加载包含我的模块的捆绑脚本'/ bundles/scripts？v = GZ0QWPB4G0soItEmlsPC6Yp3zftCRVleVTcH3LseMWo1'.首先,我的问题是如何将require服务器生成的包URL传递给require.config.js文件中的RequireJS,而不对包路径进行硬编码？
其次,jqueryui模块似乎没有加载.我在jquery ui min文件中的AMD代码中添加了模块名称.如何让jquery ui与RequireJS和ASP.NET捆绑一起工作？
有一个 NuGet 包 RequireJs.NET https://www.nuget.org/packages/RequireJsNet/，它是 .NET MVC 的 RequireJs 的实现。
RequireJS 是异步模块定义 (AMD) 的实现，它提供了编写模块化 JavaScript 所需的所有工具。如果您正在开发一个包含大量 JavaScript 代码、许多外部组件和框架的大型项目，RequireJS 将帮助您管理依赖关系的复杂性。
您将有权访问配置文件 (json)，如下所示：
{
"paths": {
"jquery": "jquery-1.10.2",
"jquery-validate": "jquery.validate",
"jquery-validate-unobtrusive": "jquery.validate.unobtrusive",
"bootstrap": "bootstrap",
"respond": "respond",
"i18n": "Components/RequireJS/i18n",
"text": "Components/RequireJS/text",
"menu-module" : "Controllers/Common/menu-module"
},
"shim": {
"jquery-validate": {
"deps": [ "jquery" ]
},
"jquery-validate-unobtrusive": {
"deps": [ "jquery", "jquery-validate" ]
},
"bootstrap": {
"deps": ["jquery"]
}
},
"autoBundles": {
"main-app": {
"outputPath": "Scripts/Bundles/",
"include": [
{
"directory": "Controllers/Root"
}
]
},
"require-plugins": {
"outputPath": "Scripts/Bundles/",
"include": [
{
"file": "Components/RequireJS/i18n"
},
{
"file": "Components/RequireJS/text"
}
]
}
}
}
之后，您将把 RequireJs 配置渲染到您的布局中。
@using RequireJsNet
<!DOCTYPE html>
<html>
<head>
<!-- head content -->
</head>
<body>
<!-- body content -->
@Html.RenderRequireJsSetup(new RequireRendererConfiguration
{
// the url from where require.js will be loaded
RequireJsUrl = Url.Content("~/Scripts/Components/RequireJS/require.js"),
// baseUrl to be passed to require.js, will be used when composing urls for scripts
BaseUrl = Url.Content("~/Scripts/"),
// a list of all the configuration files you want to load
ConfigurationFiles = new[] { "~/RequireJS.json" },
// root folder for your js controllers, will be used for composing paths to entrypoint
EntryPointRoot = "~/Scripts/",
// whether we should load overrides or not, used for autoBundles, disabled on debug mode
LoadOverrides = !HttpContext.Current.IsDebuggingEnabled,
// compute the value you want locale to have, used for i18n
LocaleSelector = html => System.Threading.Thread.CurrentThread.CurrentUICulture.Name.Split('-')[0],
// instance of IRequireJsLogger
Logger = null,
// extensability point for the config object
ProcessConfig = config => { },
// extensability point for the options object
ProcessOptions = options => { },
// value for urlArgs to be passed to require.js, used for versioning
UrlArgs = RenderHelper.RenderAppVersion()
})
</body>
</html>
如需进一步阅读，您可以访问文档页面：http://requirejsnet.veritech.io/。
或者 github 项目（用于问题和问题）：https ://github.com/vtfuture/RequireJSDotNet
在这个包中还存在一个用于捆绑和缩小的压缩器（基于 YUI 压缩器）。