RequireJS进阶(二) 转

这一篇来认识下打包工具的paths参数,在入门一中就介绍了require.config方法的paths参数。用来配置jquery模块的文件名(jQuery作为AMD模块时id为“jquery”,但文件名可通过paths配置可以不必是“jquery.js”,而是带有版本的如“jquery-1.7.2.js”)。

在入门一中,jquery-1.7.2.js和main.js都在一个域中,即把jquery-1.7.2.js下载到本地了。但有时可能一些JS资源不在同一个域。比如直接使用Google CDN上的jquery 1.7.2版本。而这时应该如何使用打包工具r.js呢?

r.js自然不会去载入非本地资源,即没有办法去把外域的js文件请求下来再合并,压缩。当使用paths参数后,使用r.js合并压缩时要忽略paths映射的文件-不合并它。让其作为一个独立模块请求。

创建目录及文件如下

和上一篇一样,但main.js代码不同,注意目录中没有jQuery库。

main.js


1

2

3

4

5

6

7

8

9

10

require.config({

    baseUrl: ‘js‘,

    paths: {

        ‘jquery‘https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min

    }

});

require([‘jquery‘‘event‘‘selector‘], function($, E, S) {

    alert($);

});

配置了paths参数,即jquery模块使用Google CDN的文件。

如果按照上一篇的命令来执行合并压缩,

node r.js -o baseUrl=js name=main out=built.js

发现命令行报错了,提示“D:\work\req\r5\js\jquery.js”不存在。刚刚新建的目录中的确没有jquery.js,因为我们使用的是Google CDN上的jquery。

此时压缩参数paths就排上用处了,修改如下

node r.js -o baseUrl=js name=main out=built.js paths.jquery=empty:

注意红色圈住的参数(empty后有个冒号哦),表示paths.jquery不参与合并,压缩。这时生成的built.js也就不包含它了。

把目录r5放到apache或其它web服务器上,访问index.html。

网络请求如下

built.js包含了main.js、event.js、cache.js,selector.js。jquery则是独立的一个请求,来自ajax.googleapis.com。

再看看如何使用r.js来合并压缩css文件。在r5下新建一个css文件夹,里面有四个css文件:main.css、nav.css、form.css、grid.css。

main.css是合并的主文件,或称配置文件。要合并的文件使用@import引入。如下

main.css


1

2

3

@import url("nav.css");

@import url("grid.css");

@import url("form.css");

另外三个是普通的css文件,里面定义的各种样式。这里不贴代码了。这里将使用命令行将这四个文件合并后生成到r5/css/built.css。

node r.js -o cssIn=css/main.css out=css/built.css

这时回到r5/css目录会发现多了一个built.css文件,该文件是另外四个css文件的合并项。

还可以使用optimizeCss参数设置来配置是否压缩及压缩选项。optimizeCss的取值有standard/none/standard.keepLines/standard.keepComments/standard.keepComments.keepLines。

none  不压缩,仅合并

standard  标准压缩 去换行、空格、注释

standard.keepLines  除标准压缩外,保留换行

standard.keepComments  除标准压缩外,保留注释

standard.keepComments.keepLines  除标准压缩外,保留换行和注释

示例:

node r.js -o cssIn=css/main.css out=css/built.css optimizeCss=standard

压缩后built.css整个为一行了。

总结:

1,对于path配置的非本地的模块文件,使用r.js合并压缩时需要配置paths.xx=empty:。

2,cssIn和optimizeCss参数的使用来合并压缩css文件。

r5.zip

时间: 2024-10-27 02:38:24

RequireJS进阶(二) 转的相关文章

Python爬虫进阶二之PySpider框架安装配置

关于 首先,在此附上项目的地址,以及官方文档 PySpider 官方文档 安装 1. pip 首先确保你已经安装了pip,若没有安装,请参照 pip安装 2. phantomjs PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速.原生支持各种Web标准:DOM 处理.CSS 选择器.JSON.Canvas 和 SVG. PhantomJS 可以用于页面自动化.网络监测.网页截屏以及无界面测试等. 安装 以上附有官方安

2、蛤蟆的数据结构进阶二静态查询之顺序查询

2.蛤蟆的数据结构进阶二静态查询之顺序查询 本篇名言:"我从不把安逸和快乐看作是生活的本身 --这种伦理基础,我叫它猪栏的理想. --爱因斯坦" 这篇我们来看下静态查询中的顺序表查询. 我们先来看下概念,然后是代码实现. 欢迎转载,转载请标明出处:http://blog.csdn.net/notbaron/article/details/47175103 1.  查找 在计算机科学中定义为:在一些(有序的/无序的)数据元素中,通过一定的方法找出与给定关键字相同的数据元素的过程叫做查找.

RequireJS进阶(一)

为了应对日益复杂,大规模的JavaScript开发.我们化整为零,化繁为简.将复杂的逻辑划分一个个小单元,各个击破.这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元.如果上线时都是这些小文件,那将对性能造成一定影响. RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩.r.js非常强大,不但可以压缩js,css,甚至可以对整个项目进行打包. r.js的压缩工具使用UglifyJS或Closure Compiler.默认使用UglifyJS(jQuery也是使

Android进阶(二十八)上下文菜单ContextMenu使用案例

上下文菜单ContextMenu使用案例 前言 回顾之前的应用程序,发现之前创建的选项菜单无法显示了.按照正常逻辑来说,左图中在"商品信息"一栏中应该存在选项菜单,用户可进行分享等操作,但是现在此操作莫名其妙的消失了.写了个测试Demo,如中图所示,一切按照逻辑显示正常.怪就怪在项目中无法显示,起初设想是因为Android系统版本太高问题,但是在别的手机上测试之后发现问题依旧存在.难道是因为顶部Tab标题栏遮挡住了选项菜单的显示?继续测试,通过在别的没有Tab标题栏的页面测试选项菜单,

Java进阶(二十五)Java连接mysql数据库(底层实现)

Java进阶(二十五)Java连接mysql数据库(底层实现) 前言 很长时间没有系统的使用java做项目了.现在需要使用java完成一个实验,其中涉及到java连接数据库.让自己来写,记忆中已无从搜索.特将之前使用的方法做一简单的总结.也能够在底层理解一下连接数据库的具体步骤. 实现 首先需要导入相关的jar包,我使用的为:mysql-connector-java-5.1.7-bin.jar. 下面来看一下我所使用的数据库连接方法类: MysqlUtil.java package cn.edu

RequireJS进阶(一) 转

为了应对日益复杂,大规模的JavaScript开发.我们化整为零,化繁为简.将复杂的逻辑划分一个个小单元,各个击破.这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元.如果上线时都是这些小文件,那将对性能造成一定影响. RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩.r.js非常强大,不但可以压缩js,css,甚至可以对整个项目进行打包. r.js的压缩工具使用UglifyJS或Closure Compiler.默认使用UglifyJS(jQuery也是使

分布式进阶(二)Ubuntu 14.04下安装Dockr图文教程(一)

当前,完全硬件虚拟化技术(KVM.Xen.Hyper-V 等)能在一个物理主机上很好地运行多个互相独立的操作系统,但这也带来一些问题:性能不佳,资源浪费,系统反应迟缓等.有时候对用户来说,完全的硬件虚拟化并不是最好的选择. 一种替代方案是使用轻量级虚拟化技术 -- 所谓的 LinuX Container 容器 (LXC),它提供的是系统级虚拟化.与跑虚拟机相比,LXC 可以在一个轻量级沙箱容器里面跑多个 Linux 操作系统.当你需要设置一些易于克隆的开发环境.测试环境,或想在安全沙盒里安装应用

收藏文章 写的很好 可惜有些还是看看不懂额。。。RequireJS进阶:模块的定义与加载

文 RequireJS进阶:模块的定义与加载 javascript requirejs 两仪 2014年12月01日发布 推荐 4 推荐 收藏 15 收藏,6.9k 浏览 概述 模块不同于传统的脚本文件,它良好地定义了一个作用域来避免全局名称空间污染.它可以显式地列出其依赖关系,并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入,而无需引用全局变量.RequireJS的模块是模块模式的一个扩展,其好处是无需全局地引用其他模块. RequireJS的模块语法允许它尽快地加载多个模块,虽然

python yield 进阶(二)

PS:接上一篇 本文摘自OSchina Linuxqueen 不幸的是,这样做看上去似乎不太可能.即使是我们有神奇的函数,可以让我们从n遍历到无限大,我们也会在返回第一个值之后卡住: 1 def get_primes(start): 2     for element in magical_infinite_range(start): 3         if is_prime(element): 4             return element 假设这样去调用get_primes: 1

Lua进阶(二)——函数环境、包

函数环境 function foo() print(g or "No g defined!") end foo() setfenv(foo, { g = 100, print = print }) --设置foo的环境为表{ g=100, ...} foo() print(g or "No g defined!") --No g defined! --100 --No g defined! 定义:函数环境就是函数在执行时所见的全局变量的集合,以一个表来承载. 说明: