基于ROOT URL + baseUrl +模块路径修复RequireJS加载模块答案

【问题标题】：RequireJS loading of modules to be fixed based on ROOT URL + baseUrl + module path基于ROOT URL + baseUrl +模块路径修复RequireJS加载模块
【发布时间】：2013-08-22 08:02:50
【问题描述】：

您好，我正在使用 requirejs 将我的 javascript 代码组织到 AMD 模块中，我现在正在使用 codeigniter 构建一个非单页网站，我所做的是我有一个默认布局 html 文件，我总是调用它渲染正文的动态内容，以便调用 requirejs 并具有 data-main 属性的脚本在我的布局 html 页面上进行编码。

<script data-main="<?=base_url('assets/js/main.js');?>" src="<?=base_url('assets/js/require.js');?>"></script>

我的 main.js 看起来像这样。

requirejs.config({
baseUrl: "assets/js",
paths: {
    jquery: 'vendor/jquery',

    bootstrap: 'vendor/bootstrap',

    datatables: 'vendor/jquery.dataTables'

},

shim: {
    jquery: { exports: '$' },
    datatables: { deps: ['jquery'] }
}
});

requirejs(['bootstrap','datatables'], function(){

})

所以当我输入我的网址“localhost/ci-project/”时，它会加载布局页面和动态正文。在这种情况下，它工作正常。 sicne requirejs 将正确呈现路径“localhost/ci-project/assets/js/vendor/[js file/module]”

但是当我将 URL 更改为“localhost/ci-project/welcome/admin”时。 requirejs 加载模块的操作是将 baseUrl + 模块路径连接到当前 URL，在本例中为 'localhost/ci-project/welcome/admin' ，最终结果如下：

'localhost/ci-project/welcome/admin/assets/js/vendor/[module]' 这是错误的。

那么我如何配置 requirejs 以始终从根 url 加载，然后将 baseUrl 值与每个模块的路径连接起来？

【问题讨论】：

标签： javascript requirejs amd

【解决方案1】：

解决这个问题的方法是从服务器端变量输出baseUrl。

在您的 PHP 页面中：

<script>
var require = {
    baseUrl: '<?= base_url(); ?>' // Or whatever outputs the full path to your site root
};
</script>
<script data-main="<?=base_url('assets/js/main.js');?>" src="<?=base_url('assets/js/require.js');?>"></script>

在加载 RequireJS 之前创建一个 require 对象允许您定义将自动获取的配置选项。

从main.js 内部再次调用require.config() 很好，它只会添加额外的配置选项，但请务必从那里删除baseUrl。

【讨论】：

【解决方案2】：

当我在导航到带有参数的路由时遇到问题时，Simon 的上述回答有所帮助 - 基本 url 的相对路径出错。我正在使用asp .net mvc，但解决方案完全相同： (_Layout.cshtml)

<script>
    var require = {
        // by default, load any module IDs from
        baseUrl: '@Url.Content("~/Scripts/lib")'
}
</script>
<script data-main="@Url.Content("~/Scripts/application/app.js")" src="@Url.Content("~/Scripts/lib/require.js")"></script>

【讨论】：