需要 js 在 html 脚本标签中定义模块

Question

我正在尝试在 html 的脚本标签内为我的应用程序的初始配置选项定义一个模块。但我收到以下错误：

Error: Module name "options" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded

这里是 html:

<script src="Scripts/require.js" data-main="/Recruiter/temp-search/App/main"></script>
<script> 

    define('options',['jquery'],function($) {        
        return options = {
            salesPhoneNumber : '@ConfigurationManager.AppSettings.Get("SalesPhoneNumber")',
            saleInfoMessage : "To access Temp Search candidate details, please call our team on " + salesPhoneNumber,
            subscriptionInfo : @Html.Raw(new JavaScriptSerializer().Serialize(Model.AccessInfo ?? null)),
            questionProLink: src="@(Request.Url.Scheme)://www.questionpro.com/a/TakeSurvey?id=@(Model.IsRecCon ? AppSettings.SurveyRecConId : AppSettings.SurveyOthersId)&amp;custom1=@Model.RecruiterEmail&amp;custom2=@Model.RecruiterId",
            surveyEnabled: '@AppSettings.FlexSurveyEnabled',
            whatsNewUrl: '@AppSettings.UrlWhatsNew',
            salesPhoneNumber:salesPhoneNumber,
            showSaleInfo: '@ViewBag.ShowSaleInfo',
            fileDownloadFailCookieName:'@AppSettings.FileDownloadFail',
            urls: {
                signInUrl: '@string.Format("https://{0}/recruiter/account/signIn", Url.RequestContext.HttpContext.Request.Url.Host)',
                signInTempsHome: '/recruiter/temp-search/home',
                signInTempsSearch: '/recruiter/temp-search/api/temps',
                checkAvailabilityUrl: '/recruiter/temp-search/api/availability',
                searchUrl: '/recruiter/temp-search/api/temps/search',
                accesslimitUrl: '/recruiter/temp-search/api/ecruiters/accessinfo',
                previewUrl: '/recruiter/temp-search/api/temps/preview'
            },
            elements: {
                signInRegisterDialog: $("#signInRegisterDialog"),
                noSubscriptionDialog: $("#noSubscriptionDialog"),
                searchForm: $("#searchForm"),
                searchKeywords: $("#Keywords"),
                searchLocation: $("#Location"),
                searchRadius: $("#Radius"),
                searchSortBy: $("#sortBy"),
                searchTemp: $("#Temporary"),
                searchContract: $("#Contract"),
                searchPayRateFrom: $("#PayRateFrom"),
                searchPayRateTo: $("#PayRateTo"),
                searchAvailability: $("#AvailabilityConfirmed"),
                locationErrorMsg: $("#locationErrorMsg"),
                checkAll: $(".checkAll"),
                checkCandidate: $(".checkCandidate"),
                availability: {
                    availabilityBtn: $("#availabilityBtn"),
                    availabilityDialog: $("#availabilityDialog"),
                    additionalInformation: $("#AdditionalInformation"),
                    jobPosition: $("#JobPosition"),
                    jobLocation: $("#JobLocation"),
                    payRate: $("#JobPayRateFrom"),
                    payRateTo: $("#JobPayRateTo"),
                    startOn: $("#StartOnDate"),
                    duration: $("#Duration"),
                    checkAvailabilityForm: $("#checkAvailabilityForm"),
                    availabilityLocation: $("#checkAvailabilityForm #JobLocation"),
                    candidateIds: $("#CandidateIds"),
                    tempJobId: $("#TempJobId"),
                    msgPanel: $("#msgPanel"),
                    msg: $(".msg"),
                    errorAvailability: $("#availabilityError"),
                    availabilityConfirmationDialog: $("#availabilityConfirmationDialog"),
                    infoBubbleMessage : $("#infoBubbleMessage"),
                    availabilityConfirmationMsg: $("#availabilityConfirmationDialog .msgDialog"),
                    downloadInfoLink : $("#downloadInfoLink")
                },
                preview: {
                    previewBtn: $('.previewBtn')

                },
                messagePanel: $("#messagePanel")
            },
            minWageRate : @Constants.Range.ApprenticeshipsPerHourMin,
            authentication : @(Request.IsAuthenticated.ToString().ToLower()),
            minDate: '@String.Format("{0:yyyy/MM/dd}", DateTime.Now)',
            pageInfo: {
                number: @Model.Results.PageNumber,
                size: @Model.Results.PageSize,
                resultsCount: @Model.TotalResultsCount
            },
            criteria : @Html.Raw(new JavaScriptSerializer().Serialize(Model.Criteria)),
            remainingAccessLimit: @Model.AccessInfo.Remaining,
            totalAccessLimit: @Model.AccessInfo.Limit,
            availableCandidates: @Model.AvailableCandidates,
            candidates: @Html.Raw(new JavaScriptSerializer().Serialize(Model.Results ?? Model.Results.ToJSON()))
        };
    })
</script>

Answer 1

问题不在于您在问题中显示的代码，而在于您如何要求 RequireJS 加载您的模块。当您执行此形式的 require 调用时，会出现您显示的错误消息：

var foo = require('foo');

这种require调用不起作用除非foo已经加载，并且为了确保它已经加载你可以自己手动加载它，或者您可以让 RequireJS 为您完成。然而，要让 RequireJS 为你做这件事，你需要以某种方式编写你的代码。如果你想让一个模块使用 foo 并且你想使用上面的 require ，你应该这样做：

define(function (require) {
    var foo = require('foo');
    ...
});

或者如果需要使用module和exports，回调可以是function (require, exports, module) {....

另外，您应该按顺序执行以下操作：

加载 RequireJS.
执行define('options', ....
然后并且只有在那时开始加载您的应用程序。

这意味着删除 data-main 并在 define('options' 之后使用显式 require 调用。

需要 js 在 html 脚本标签中定义模块

require js defining modules in html script tags

requirejs