RequireJS 是什么
RequireJS是一个工具库，主要用于客户端的模块管理。
安装
1 | npm i -D requirejs |
安装到项目文件下，安装完成后有个node_modules文件，路径是node_modules/requirejs/require.js
使用方法
RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。
首先，将require.js嵌入网页，然后就能在网页中进行模块化编程了。
1 | <script data-main="main" src="scripts/require.js"></script> |
上面代码的data-main属性不可省略，用于指定主代码所在的脚本文件，在上例中为根目录下的main.js文件。用户自定义的代码就放在这个main.js文件中。
1 | // main.js |
2 | require(['./hello'],function(x){ |
3 | console.log(x) |
4 | }); |
main.js 依赖 hello.js,等 hello.js 加载完毕，main.js 才会执行。
1 | // hello.js |
2 | define(['./frank'],function(x){ |
3 | return 'Hello,'+ x.name |
4 | }); |
hello.js 依赖 frank.js,等 frank.js 加载完毕 hello.js 才会执行。
1 | // frank.js |
2 | define({ |
3 | name :'Frank' |
4 | }); |
frank.js 没有依赖任何文件，frank.js 加载完毕，hello.js 和 main.js 才会执行。控制台打出 Hello,Frank
requirejs 里引入 jQuery
1.在 requirejs.config 里写上 jquery 的路径
1 | // 假设 jquery-min.js 位于 js/lib/jquery-min.js |
2 | requirejs.config({ |
3 | baseUrl: 'js/lib', // 路径1 |
4 | paths: { |
5 | jquery: 'jquery-min' // 路径2 |
6 | } |
7 | }); |
8 | // 只要 路径1 + 路径2 = jquery 的路径 就行了，所以你写成下面这样也对 |
9 | requirejs.config({ |
10 | baseUrl: 'js', // 路径1 |
11 | paths: { |
12 | jquery: 'lib/jquery-min' // 路径2 |
13 | } |
14 | }); |
15 | // 你甚至可以不写 baseUrl |
16 | requirejs.config({ |
17 | paths: { |
18 | jquery: 'js/lib/jquery-min' // 路径2 |
19 | } |
20 | }); |
2.使用 jQuery
1 | require(['jquery'], function(xxx){ |
2 | console.log(xxx) // xxx 可以改成任何其他名字，比如 $ |
3 | }) |
requirejs 所有模块名应该小写。