如何在RequireJS配置中管理相对路径，无需手动引入脚本？

问题描述 #

我想在项目中实现某一功能，该功能取自GitHub仓库中的sample-app。我将其CSS和JS文件上传至jsDelivr获取CDN链接，以此替代项目中的静态文件。该仓库使用RequireJS，我需手动修改main.js中的RequireJS配置，将原本的相对路径（如jquery: 'lib/jquery-3.3.1.min'）替换为CDN链接。但代码中存在如define(['page/login'])这类使用相对路径的模块，无法在paths配置项中添加类似page/login: 'some cdn'的规则。请问是否有办法在RequireJS配置中管理这类相对路径，无需手动引入相关脚本？

解决方案 #

1. 用baseUrl统一指定CDN根路径 #

如果你的模块都托管在同一个CDN根目录下，直接修改RequireJS的baseUrl为该CDN根路径即可。所有相对路径的模块都会自动从这个地址加载，无需逐个配置：

requirejs.config({
    baseUrl: 'https://cdn.jsdelivr.net/gh/[你的用户名]/[目标仓库名]/[对应文件目录]',
    paths: {
        // 仅需配置不在上述baseUrl下的第三方库
        jquery: 'https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min'
    }
});

配置后，define(['page/login'])会自动请求https://cdn.jsdelivr.net/gh/[你的用户名]/[目标仓库名]/[对应文件目录]/page/login.js，完美匹配你托管的文件结构。

2. 用map配置前缀映射规则 #

如果模块分散在不同CDN路径，或不想修改全局baseUrl，可以通过map配置匹配特定前缀的模块路径，将其映射到对应CDN地址：

requirejs.config({
    map: {
        '*': {
            'page/': 'https://cdn.jsdelivr.net/gh/[你的用户名]/[目标仓库名]/path/to/page/'
        }
    },
    paths: {
        jquery: 'https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min'
    }
});

这个配置会把所有以page/开头的模块请求替换为指定的CDN前缀，比如page/login会被解析为https://cdn.jsdelivr.net/gh/[你的用户名]/[目标仓库名]/path/to/page/login.js。

3. 用packages配置处理模块化目录 #

如果page是包含多个子模块的目录，可通过packages配置定义这个目录的CDN地址：

requirejs.config({
    packages: [
        {
            name: 'page',
            location: 'https://cdn.jsdelivr.net/gh/[你的用户名]/[目标仓库名]/path/to/page',
            main: 'login' // 可选：指定该目录默认加载的模块
        }
    ],
    paths: {
        jquery: 'https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min'
    }
});

配置后，无论是define(['page/login'])还是define(['page'])，都能正确从CDN加载对应文件。

注意事项 #

• 确保CDN上的文件结构和原项目的相对路径结构完全一致，避免出现404错误
• 依赖其他模块的文件，要保证依赖模块也能通过RequireJS配置正确加载
• 可通过浏览器开发者工具的Network面板，验证模块是否从CDN正确加载

内容的提问来源于stack exchange，提问作者Andi Fathul Mukminin