语言►JavaScript►模块化方案►AMD

RequireJS中的模块路径解析

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/22/RequireJS%E4%B8%AD%E7%9A%84%E6%A8%A1%E5%9D%97%E8%B7%AF%E5%BE%84%E8%A7%A3%E6%9E%90/

摘要

本文主要讲述了：

  1. 解析机制
  2. 路径映射
  3. 特殊情况

正文

解析机制

默认情况下，RequireJS 会把模块 Id 解析为路径（并自动添加.js后缀），然后和baseUrl进行路径合并，进而得到绝对路径。

示例：

learn_requirejs/index.html

1
2
3
4
5
6
7
8
9
10
11
<!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(['lib/demo'], function (demo) {
  console.log(demo);
});

learn_requirejs/js/lib/demo.js

1
2
3
4
define({
  color: 'black',
  size: 'unisize',
});

在这个示例中，lib/demo的解析过程如下：

  1. baseUrl 为js
  2. 模块 Id 为lib/demo，解析为路径得到lib/demo.js
  3. 路径合并得到js/lib/demo.js

路径映射

RequireJS 支持在paths里手动配置模块 Id 和路径的映射关系。

示例：

1
2
3
4
5
6
7
8
9
10
11
<!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
4
5
6
7
8
9
require.config({
  paths: {
    demo: 'lib/demo',
  },
});

require(['demo'], function (demo) {
  console.log(demo);
});

learn_requirejs/js/lib/demo.js

1
2
3
4
define({
  color: 'black',
  size: 'unisize',
});

特殊情况

当模块 Id 满足以下任意条件之一时，RequireJS 不会进行解析。

  • 以/开头，例如：/foo
  • 以.js结尾，例如：foo.js
  • 包含 URL 协议，例如：http://example.com/foo、https://example.com/foo

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/22/RequireJS%E4%B8%AD%E7%9A%84%E6%A8%A1%E5%9D%97%E8%B7%AF%E5%BE%84%E8%A7%A3%E6%9E%90/

本文对你有帮助？请支持我

支付宝
微信