RequireJS 初探

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 所有模块名应该小写。