javascript - 将需求配置移动到外部文件

Question

现在在我的标题中我有这段代码:

<script src="/js/libs/requirejs/requirejs.min.js"></script>
<script>
    require.config({
        baseUrl: "/js/libs",
        paths: {
            jquery: "jquery/jquery-1.11.1.min",
            jqueryUi: "jquery-ui/mapa/js/jquery-ui-1.10.4.custom.min",
            portal: "../dev/portal"
        },
        shim: {
            "jqueryUi": {
                export:"ui" ,
                deps: ['jquery']
            }
        }
    });
    require( ["portal"], function(portal) {
            portal.config={'var': 'value'};
            portal.init();
        }
    );
</script>

我想使用 data-main attr 以正确的方式做到这一点:

<script data-main="/js/build/req-init" src="/js/libs/requirejs/requirejs.min.js"></script>
<script>
    require( ["portal"], function(portal) {
            portal.config={'var': 'value'};
            portal.init();
        }
    );
</script>

并将所有 require.config 移动到该文件 (/js/build/req-init.js)。

问题是它在根目录中搜索 potral.js 文件，因为数据主文件尚未加载并且它不知道路径。如何延迟执行 require(["portal"]) ？由于 portal.config，我需要在 HTML 中使用 portal.init() - 变量将使用 php 定义。

Answer 1

我在我们的 html5 应用程序中应用了不同的模式，将 requireJS 配置移动到外部文件。

目录结构

{webroot}/
   html/
   js/
      apps/
          conf.js
          main.js
      libs/
          jquery-1.11.1.min.js
          ...

../js/app/conf.js

var require = {
    baseUrl: "../js",
    paths: {
        app:      "../js/app",
        libs:     "../js/libs",
        jquery:   "libs/jquery/jquery-1.11.1.min",
        jqueryUi: "libs/jquery-ui/mapa/js/jquery-ui-1.10.4.custom.min",
        portal:   "../dev/portal"
    },
    shim: {
        "jqueryUi": {
            export:"ui" ,
            deps: ['jquery']
        }
    }
});

../js/app/main.js

require( ["portal"], function(portal) {
        portal.config={'var': 'value'};
        portal.init();
    }
);

在 html 中

<scrip src="/js/app/conf.js"></script>
<script data-main="app/main" src="/js/libs/requirejs/requirejs.min.js"></script>