进阶的眼前两首讲述了r.js如何通过命令执行把具备的模块压缩为一个js文件要将装有的css压缩也一个css文件。其中囊括有削减配置参数的采用。

 

而以上两种植方式发生几个问题

1、通过命令手动配置压缩选项显得甚死
2、都单合并为一个文本

于最后才大成一个文件的仓库来说,这种方式并无不妥。比如jQuery,它的工程被略文件发出20多个,打包后独自出一个jquery-1.x.x.js。对于多数实际上运用类型以来,可能卷入后需要扭转多独js文件。有些是页面打开时将以的,有些是用户点击或输入时照需加载的。

 

r.js有另外一栽办法来归并减,即透过一个布局文件(如build.js)。配置文件中使用前端工程师非常熟悉JSON格式。这样当型支出目录固定后,配置文件为应和定点。通过安排文件就格外好的割裂了支付环境和上线环境。

 

这次我们创建的目中隐含有前端资源,js,css,图片。

图片 1

个中起点儿独页面page1.html,page2.html。这片个页面分别采用page1.js和page2.js。

 

page1.js乘让event和selector,page2.js仗让event、selector和jQuery。jQuery是非本地的,没有统一前我们一直看这简单独页面,那么单个的js文件会挨个下载。

图片 2

图片 3

 

现行采取r.js来统一减,使每个页面除下载require.js外就生充斥各自合并之怪文件page1.js及page2.js。

build.js如下

({
    appDir: "./",
    baseUrl: "js",
    dir: "../r6-built",
    paths: {
        jquery: 'empty:'
    },
    modules: [
        {
            name: "page1"
        },
        {
            name: "page2"
        }
    ]
})

 

跻身命令执行输入如下命令
node r.js -o
build.js

图片 4

见面发现以跟r6同层的目录生成了r6-built目录

图片 5

该目录包含于r6一样的层级结构,这时访问该目录中之page1.html,page2.html。

图片 6

图片 7

这时的page1.js同page2.js就是另模块文件之合。另外当r6-built中任何的模块文件呢被裁减了。

 

以build.js中可安排很多别样参数,可以在这个示范文件受到找到更多配备选项。这里不一一列举。

 

总结:

通过安排文件方式可以实现更加强大,灵活的汇合工作。可以变更多个统一文件,包括不同页面的js,css。

 

r6.zip

 

相关文章

网站地图xml地图