require.js 配置相关js路径， 模块申明， html界面引用， 详细用法（配上demo地址）

require.js

配置文件相关js路径：require.config();

// 1. 路径文件名不要添加 `.js` 后缀，require会强制添加一次 `.js` 
require.config({
    baseUrl: "/", // 基础目录，在之后的paths里面的文件进行路由之前，先在路径之前加上baseUrl路径 (url = baseUrl + paths: => "/" + "js/modules/header" = "/js/modules/header")
    paths:{
        "header": "js/modules/header",
        "jquery": "libs/jquery/jquery",
        "bootstrap": "libs/bootstrap/js/bootstrap.min",
    },
    // 垫片： 某一模块的运行需要基于其他模块
    shim:{
        "bootstrap":{
            deps:['jquery']
        }
    }
});

页面直接引用(.js) ： require([], () => {});

// 需要进行嵌套调用: 所有的模块文件，都需要基于 ./config.js 文件，的目录寻找
// 此处config.js放置于js直接目录下，便于引用
require(["./config"], () => {
    // 正真引用模块文件
    require(["header", "jquery", "bootstrap"], () => {

    });
});

模块申明： define([], () => {});

// 模块申明： define方法，
//      - 第一个参数为依赖文件的路径(应该在require.config文件中配置)， 
//      - 第二个参数为可执行函数，所有页面逻辑书写的地方，
//      - 可执行函数的参数，与第一个依赖文件一一对应
define(["jquery","bootstrap"], ($, bootstrap) => {
    class Header{
        constructor(){
            this.loadHeader().then(() => {
                
            });
        }

        /** 加载header.html文件
         *********************************/
        loadHeader(){
            return new Promise(resolve => {
                $("header").load("/html/modules/header.html", resolve);
            });
        }
    }

    return new Header();
});

html界面引用 js 文件

<script src="/libs/require/require.js" data-main="/js/index"></script>

- src： 引用require.js文件
- data-main: 需要真正引用的js文件

配上demo的gitee地址：https://gitee.com/PursuitComesFromLove/CSDN/tree/master/gulp-sifou