详解require.js配置路径的用法和css的引入

2023年6月11日上午7:14 • JavaScript

认真阅读本文后，你将完整掌握使用require.js配置路径的方法和css文件的引入方法。

require.js配置路径的用法

require.js是一个基于AMD标准的JavaScript模块加载工具，它可以帮助我们对JavaScript代码进行模块化管理。在使用require.js的过程中，我们需要配置路径来告诉require.js加载什么模块，以及该模块在哪里。

配置模块路径

我们可以对不同的模块进行不同路径的配置。在require.js的配置文件中，使用paths属性来配置模块路径。下面是一个示例：

// 配置模块路径
require.config({
    paths: {
        'jquery': 'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min',
        'vue': 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min'
    }
});

这个示例中，我们将jquery模块的路径设置为https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min，将vue模块的路径设置为https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min。这样，在使用require(['jquery', 'vue'], function($, Vue) {})时，require.js就会从指定的路径加载jquery和vue模块。

需要注意的是，模块路径的配置要写在require.config()里，而且路径的后缀名可以省略。

配置模块依赖

我们可以在模块的定义中指定该模块的依赖。在require.js中，使用define函数定义模块时，使用require参数来声明依赖项。在require.js的配置文件中，使用shim属性来给非AMD模块添加依赖项。

以jquery插件select2为例，select2是一个非AMD规范模块，我们需要手动添加对jquery的依赖。在require.js的配置文件中添加如下代码：

shim: {
    'select2': {
        deps: ['jquery'],
    }
}

这样，在使用require(['select2'], function(Select2) {})时，require.js会先加载jquery模块，然后再使用jquery模块加载select2模块。

css的引入

在使用require.js时，我们还需要引入样式文件。require.js提供了一个插件，名为css!，来引入样式文件。

引入样式文件

在需要载入样式文件的模块定义中，使用css!前缀来告诉require.js该文件是一个样式文件。示例代码如下：

define(['css!path/to/style.css'], function() {});

这里的path/to/style.css是样式文件的路径。注意，在这里不需要指定后缀名，require.js会自动根据文件扩展名判断是JavaScript模块还是样式文件。

外部样式文件

如果样式文件来自第三方CDN，需要指定绝对路径。示例代码如下：

define(['css!https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css'], function() {});

示例

下面是一个完整的示例代码：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>require.js的配置路径和css的引入</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/css/select2.min.css">
</head>
<body>
    <select class="select2">
        <option value="1">选项一</option>
        <option value="2">选项二</option>
    </select>
    <script data-main="js/main" src="js/libs/require.js"></script>
</body>
</html>

js/main.js

require.config({
    paths: {
        'jquery': 'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min',
        'select2': 'https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/js/select2.full.min'
    },
    shim: {
        'select2': {
            deps: ['jquery'],
        }
    }
});

require(['jquery', 'select2'], function($) {
    $('.select2').select2();
});

这个示例中，我们首先在<head>标签中引入了select2的样式文件。在require.js的配置文件中，我们配置了jquery模块和select2模块的路径，并且添加了select2模块对jquery的依赖。在main.js文件中，我们使用require的方式加载了jquery和select2模块，并在回调函数中使用select2插件对select元素进行了初始化。