javascript - RequireJS加载模块要根据ROOT URL + baseUrl +模块路径进行修复

Question

您好，我正在使用 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(){

})

所以当我在我的 url 上输入“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 值与每个模块的路径连接在一起？

Answer 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 从那里开始。