六、requirejs配置

六、 requirejs配置

配置：

本身具有这种功能，需要开启， 所以要进行配置

requirejs提供了config方法用于配置模块的

6.1 paths

作用：

简化路径

值是一个对象

key: 新的路径
value: 原始路径

// 使用config配置
requirejs.config({
    // 配置paths
    paths: {
        "module": "module/header"
    }
})

define(["module/header"], function(header) {
    console.log(header);
})

6.2 shim

作用:

将文件转为模块

值是一个对象

key: 模块路径
value 是一个配置对象

配置接口 exports
配置依赖集合 deps

// 使用config配置
requirejs.config({
    // 配置shim
    shim: {
        "lib/jquery-1.12.2": {
            // 配置接口
            exports: "$",
            deps: []
        }
    }
})

define(["module/header/header"]);

6.3 map

作用：

配置模块文件

属性是一个路径

value 是一个对象

key: 引入的模块文件
value: 修改的模块文件

// 使用config配置
requirejs.config({
    // 配置shim
    shim: {
        "lib/jquery-1.12.2": {
            // 配置接口
            exports: "$",
            // 配置依赖集合
            deps: []
        },
        "lib/jquery100": {
            // 配置接口
            exports: "$",
            // 配置依赖集合
            deps: []
        }
    },
    // 配置map
    map: {
        "module/header": {
            "lib/jquery": "lib/jquery-1.12.2"
        },
        "module/footer": {
            "lib/jquery": "lib/jquery100"
        }
    }
})

define(["module/header/header", "module/footer/footer"]);

6.4 baseUrl

作用：

更改根目录的

优先级关系：

baseUrl > data-main > require

6.5 css插件

requirejs不能直接引入css文件

在requirejs中引入css要当做模块来引入，需要配置

// 在模块文件中要加上css!前缀
map {
    “*”： {
        css: 文件目录
    }
}