使用r.js打包js文件

之前的文章里有介绍requirejs的基本使用方法，但是直接使用requirejs会暴露出一个问题，就是当模块过多的时候，requirejs就会引入许多js文件，大大的增加了请求数，那么有的朋友就要说了，我们自己压缩那些模块文件不就行了么，其实仔细想想这样到底行不行，答案是行！但是很麻烦：

1. 首先一般我们写模块时不会去定义模块名字，因为模块名字默认就是js文件名字，如果自己手动去写模块名，就增加了额外的工作量。

2. 加载顺序的问题，自己手动压缩，就要严格把控好模块的先后顺序（特别是有jquery及jquery插件的情况下），否则很容易出错。

针对这些问题，requirejs给出了解决方案，就是r.js，r.js就是针对用requirejs进行模块化开发后的打包压缩问题的。r.js下载

那么下面就来介绍如何使用r.js来打包压缩我们的模块们:

1. 把r.js放在我们的项目根目录中。

2. 新建一个built.js，内容如：

({
    baseUrl: './static/scripts/src/',
    name: "../../../main",
    paths: {
        'jquery': "vendor/jquery/jquery",
        'jquery.email': "plugin/jquery.email",
        'aaa': "moudle/aaa/aaa",
        'bbb': "moudle/bbb/bbb",
        'ccc': "moudle/ccc/ccc"
    },
    shim: {
        'jquery': {
            exports: "$"
        },
        'jquery.email': {
            deps: ["jquery"],
            exports: "jQuery.fn.hEmail"
        }
    },
    out: "main-built.js",
})

 built其实就是一个打包压缩的配置文件，这里我用的是之前文章初始requirejs(一)中的例子，这样看built.js的代码是不是很熟悉，就像require的配置js一样？事实就是差不多的，那我们来解释下不大一样的部分，name其实就是那个requirejs的入口文件，output就是打包之后的文件名，还有个叫dir的属性，我这里没有使用，是用来配置输出的文件目录的（比如dir: ../production，这样就直接输出到生产环境了），当然还有其他的属性，这里就不介绍了，详细请参考官网。

下面我们来看看输出过程：

最后生成了main-built.js文件，然后我们试着把原先代码引用的地方替换掉，

<script data-main="main-built.js" src="static/scripts/src/vendor/require/require.js"></script>

结果，页面还是能正常显示，模块还是正常加载的，而且我们的js引用就变成了一个，大大的减少了请求数，完美！