RequireJS中的baseUrl属性

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/21/RequireJS%E4%B8%AD%E7%9A%84baseUrl%E5%B1%9E%E6%80%A7/

摘要

本文主要讲述了:

作用
配置

正文

作用

RequireJS 使用baseUrl属性作为根路径，来解析模块的绝对路径。

配置

data-main

如果使用了data-main属性，则baseUrl为顶级模块所在的目录（即data-main属性值所在的目录）。

示例：

learn_requirejs/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script data-main="js/main.js" src="js/require.js"></script>
  </head>
  <body></body>
</html>

此时 baseUrl 为js。

显式配置

baseUrl 也可以使用require.config()显式配置。

如果既使用了data-main属性，又进行了显示配置，那么以显式配置为准。

示例：

learn_requirejs/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script data-main="js/main.js" src="js/require.js"></script>
  </head>
  <body></body>
</html>

learn_requirejs/js/main.js

1
2
3

require.config({
  baseUrl: 'js/app',
});

此时baseUrl为js/app。

其他

如果既没有使用data-main属性，也没有显式配置，则baseUrl为空字符串。

示例：

learn_requirejs/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="js/require.js"></script>
  </head>
  <body></body>
</html>