9

У меня есть два вопроса.RequireJS - ASP.NET MVC Bundle Script

Я пытаюсь изучить 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», который содержит мои модули. Итак, во-первых, мой вопрос заключается в том, как передать URL-адрес пакета, сгенерированный сервером, в RequireJS в файле require.config.js без жесткого кодирования пути пакета?

Во-вторых, модуль jqueryui, похоже, не загружается. Я добавил имя модуля в код AMD в файле jquery ui min. Как заставить jquery ui работать с пакетами RequireJS и ASP.NET?

ответ

2

Существует пакет NuGet RequireJs.NET https://www.nuget.org/packages/RequireJsNet/, который является реализацией RequireJs для .NET MVC.

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 CONFIG в макете.

@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 компрессора).

+0

Этот проект выглядит очень интересным –

0

Вместо bundlePath используйте пучок связок "/ Сценарии/связки/скрипты". это сработает.

Смежные вопросы