RequireJS 使用 xhr 加载脚本而不是 <script> 标签

Question

我正在尝试使用 requirejs

延迟加载 Angular 控制器

这是我的解析代码，按预期工作

require(['controllers/' + controllerName], function (data) {
    $stateParams.controllerName = data.name || controllerName;
    deferred.resolve();
});

但是此方法是将 <script> 标记添加到 head 并请求 url

我想使用 XHR 加载它，这样它就不会添加任何脚本标签或显示在资源中。

我试过这样

require(['text!controllers/' + controllerName + '.js'], function (data) {
    var funcData = new Function(data)();  //expecting data as string
    $stateParams.controllerName = funcData.name || controllerName;
    deferred.resolve();
});

但我收到错误因为 requirejs 正在尝试加载 /text.js 而不是 /controllers/nameOfController.js

是否有解决方法或其他更好的方法？（我只想用 XHR 加载脚本）

Answer 1

你的项目中有requirejs text依赖吗？

将查找 text.js，如果不存在则会出错。

Answer 2

好的..最后这就是我在不破坏 requirejs 的实际功能的情况下得出的结论。现在它使用 xhr 加载脚本..

将此添加到 main.js 以覆盖原始方法。

注意： 仅在 PROD 中使用它，否则会在浏览器中丢失脚本调试。

require.load = function (context, moduleName, url) {
    var config = (context && context.config) || {},
        isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document),
        isWebWorker = !isBrowser && typeof importScripts !== 'undefined',   
        makeError = function (id, msg, err, requireModules) {
            var e = new Error(msg + '\nhttp://requirejs.org/docs/errors.html#' + id);
            e.requireType = id;
            e.requireModules = requireModules;
            if (err) e.originalError = err;
            return e;
        },
        xmlhttp;
    if (isBrowser) {
        if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
        else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == XMLHttpRequest.DONE) {
                if (xmlhttp.status == 200) {
                    try {
                        new Function(xmlhttp.responseText)();
                        context.completeLoad(moduleName);
                    } catch (e) {
                        context.onError(makeError('scripterror', 'executing script failed for ' + moduleName + ' at ' + url, e, [moduleName]));
                    }
                }
                else context.onError(makeError('notloaded', 'loading scripts failed for ' + moduleName + ' at ' + url, xmlhttp.status, [moduleName]));
            }
        }
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    } else if (isWebWorker) {
        try {
            importScripts(url);
            context.completeLoad(moduleName);
        } catch (e) {
            context.onError(makeError('importscripts', 'importScripts failed for ' + moduleName + ' at ' + url, e, [moduleName]));
        }
    }
};

RequireJS 使用 xhr 加载脚本而不是 <script> 标签

RequireJS use xhr to load scripts instead of <script> tags

javascript

ajax

lazy-loading

requirejs

angularjs