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