Regexper:牛逼的 JavaScript 正则可视化工具
RequireJS Optimizer 是 RequireJS 自带的前端优化工具,可以对 RequireJS 项目中的 JavaScript & CSS 代码使用 UglifyJS 或者 Closure Compiler 进行压缩合并。这篇文章介绍RequireJS Optimizer 的使用和配置方法,帮助大家解决使用中碰到的问题。
RequireJS Optimizer 对脚本的优化支持目前流行的 UglifyJS 和 Closure Compiler 两种压缩方式,UglifyJS 需要 NodeJS 环境支持,而 Closure Compiler 则需要 Java 环境。这篇文章是以运行于 NodeJS 的 UglifyJS 来优化的,这也是 RequireJS Optimizer 默认的压缩方法。
首页需要安装 Node 0.4.0 或更高版本,然后下载 r.js,下载好以后就可以在命令行里对前端代码进行优化了。r.js 的参数传递使用方式,一是直接加在命令行后面,如下:
1
|
node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js |
二是新建一个配置文件,例如 build.js(推荐使用这种方式),这样配置更方便,如下:
1
|
node r.js -o build.js |
build.js 的配置代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
{ baseUrl: "../js" , dir: "../dist" , optimize: "uglify" , optimizeCss: "standard.keepLines" , mainConfigFile: "../js/main.js" , removeCombined: true , fileExclusionRegExp: /^\./, modules: [ { name: "app/dispatcher" , }, { name: "app/in-storage" , exclude: [ "jquery" , "app/common" , "pkg/DatePicker/app" ] } ] } |
基本参数介绍
appDir
应用程序的最顶层目录。可选的,如果设置了的话,r.js 会认为脚本在这个路径的子目录中,应用程序的文件都会被拷贝到输出目录(dir 定义的路径)。如果不设置,则使用下面的 baseUrl 路径。
baseUrl
默认情况下,所有的模块都是相对于这个路径的。如果没有设置,则模块的加载是相对于 build 文件所在的目录。另外,如果设置了appDir,那么 baseUrl 应该定义为相对于 appDir 的路径。
dir
输出目录的路径。如果不设置,则默认为和 build 文件同级的 build 目录。
optimize
JavaScript 代码优化方式。可设置的值:
- "uglify:使用 UglifyJS 压缩代码,默认值;
- "uglify2":使用 2.1.2+ 版本进行压缩;
- "closure": 使用 Google's Closure Compiler 进行压缩合并,需要 Java 环境;
- "closure.keepLines":使用 Closure Compiler 进行压缩合并并保留换行;
- "none":不做压缩合并;
optimizeCss
CSS 代码优化方式,可选的值有:
- "standard":标准的压缩方式;
- "standard.keepLines":保留换行;
- "standard.keepComments":保留注释;
- "standard.keepComments.keepLines":保留换行;
- "none":不压缩;
mainConfigFile
如果不想重复定义的话,可以使用这个参数配置 RequireJS 的配置文件路径。
removeCombined
删除之前压缩合并的文件,默认值 false。
fileExclusionRegExp
要排除的文件的正则匹配的表达式。
modules
定义要被优化的模块数组。每一项是模块优化的配置,常用的几个参数如下:
name:模块名;
create:如果不存在,是否创建。默认 false;
include:额外引入的模块,和 name 定义的模块一起压缩合并;
exclude:要排除的模块。有些模块有公共的依赖模块,在合并的时候每个都会压缩进去,例如一些基础库。使用 exclude 就可以把这些模块在压缩在一个更早之前加载的模块中,其它模块不用重复引入。
其它事项
RequireJS 配置也可以放到 RequireJS Optimizer 配置文件里面,例如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
{ baseUrl: "../js" , dir: "../dist" , optimize: "uglify" , optimizeCss: "standard.keepLines" , removeCombined: true , fileExclusionRegExp: /^\./, modules: [ { name: "app/dispatcher" , }, { name: "app/in-storage" , exclude: [ "jquery" , "app/common" , "pkg/DatePicker/app" ] } ], paths: { jquery: 'lib/jquery' , underscore: 'lib/underscore' , backbone: 'lib/backbone/backbone' , backboneLocalstorage: 'lib/backbone/backbone.localStorage' , text: 'lib/require/text' }, shim: { underscore: { exports: '_' }, backbone: { deps: [ 'underscore' , 'jquery' ], exports: 'Backbone' }, backboneLocalstorage: { deps: [ 'backbone' ], exports: 'Store' } } } |
RequireJS Optimizer 的配置参数还有很多,完整的参数介绍可以看这里:
https://github.com/jrburke/r.js/blob/master/build/example.build.js
为方便运行,可以新建一个批处理文件:
1
2
3
4
5
6
7
8
9
10
|
@echo off echo build... e: cd E:\SCM\SRC\scm-html\ new -scm-html\tools node r.js -o build.js echo Press any key to exit! echo. & pause |
注意事项:RequireJS Optimizer 只支持使用 require 和 define 语法定义的模块,因此下面这种通过变量定义的方式是不支持的:
1
2
|
var mods = someCondition ? [ 'a' , 'b' ] : [ 'c' , 'd' ]; require(mods); |
而如果是这样定义则可以:
1
|
require([ 'a' , 'b' ]); |
或者:
1
|
define([ 'a' , 'b' ], function (a, b) {}); |
进一步优化
使用 r.js 优化后的代码可以使用 almond 来加载。almond 是一个轻量的 AMD 加载器,提供了最基础的 AMD API 实现以及模块加载功能。almond 只有不到 400 行代码,要比 RequireJS 小很多。可以使用 r.js 把 almond 一起合并到业务代码的前面,如下:
1
2
3
4
|
( function () { //almond will be here //main and its nested dependencies will be here }()); |
almond 特别适合使用 AMD 的网站或应用,但也有一些限制:
- 所有的模块编译为一个文件,没有动态的加载;
- 所有的模块都需要在 define() 定义 ID 和依赖,这个 RequireJS Optimizer 会处理;
- 只能有一个 requirejs.config() 或者 require.config() 调用;
- 不能使用 Require JS 多版本功能;
- 不能使用 require.toUrl() 或者 require.nameToUrl();
- 不能使用 packages/packagePaths 配置。
如果你的项目中没有这些问题的话,可以放心使用 almond 进行加载。
Regexper:牛逼的 JavaScript 正则可视化工具的更多相关文章
- 搭建正则开源工具Regexper
一.Regexper简介 Regexper是一款正则可视化开源工具,直接输入正则表达式就能用可视化显示出来,方便的检测我们书写的正则是否正确. 二.Regexper地址在线版:https://rege ...
- SNF开发平台WinForm-EasyQuery统计分析-效果-非常牛逼的报表查询工具
无论是单轴曲线 .双轴曲线 .柱形图 .饼图 .雷达图 .仪表图.图表引擎全能为您轻松实现.您只需要 3 步操作(数据源准备,设计图表,挂接到您想要展示的位置)便可完成 BI 的设计. 无论是普通报表 ...
- 最牛逼的任务调度工具 | Quartz
Quartz 是一个完全由 Java 编写的开源作业调度框架,不要让作业调度这个术语吓着你,其实不难.尽管 Quartz 框架整合了许多额外功能,但就我们使用来说,你会发现它易用得简直让人受不了! 简 ...
- 推荐 2 款超牛逼、炫酷、实用的Docker管理工具!
Docker技术的火热程度,想必每个互联网IT技术人员都能时时感受的到,的确,近些年,国内对于Docker容器技术的应用需求越来越强烈!! 人均年薪80万以上,docker到底是什么?为什么这么火? ...
- 不推荐别的了,IDEA 自带的数据库工具就很牛逼!
MySQL 等数据库客户端软件市面上非常多了,别的栈长就不介绍了, 其实 IntelliJ IDEA 自带的数据库工具就很牛逼,不信你继续往下看. 本文以 IntelliJ IDEA/ Mac 版本作 ...
- 关于HTML5,最牛逼的10本书!
关于HTML5,最牛逼的10本书! 关于HTML5,最牛逼的10本书.rar HTML5+CSS3从入门到精通 李东博 著 推荐指数:★★★☆ 简介:本书通过基础知识+中小实例+综合案例的方式,讲述了 ...
- 为什么我会认为SAP是世界上最好用最牛逼的ERP系统,没有之一?
为什么我认为SAP是世界上最好用最牛逼的ERP系统,没有之一?玩过QAD.Tiptop.用友等产品,深深觉得SAP是贵的有道理! 一套好的ERP系统,不仅能够最大程度承接适配企业的管理和业务流程,在技 ...
- 从苦逼到牛逼,详解Linux运维工程师的打怪升级之路
做运维也快四年多了,就像游戏打怪升级,升级后知识体系和运维体系也相对变化挺大,学习了很多新的知识点. 运维工程师是从一个呆逼进化为苦逼再成长为牛逼的过程,前提在于你要能忍能干能拼,还要具有敏锐的嗅觉感 ...
- 不用 Notepad++,还有更牛逼的选择!
来源:oschina.net/news/110987/no-notepad-plus-plus 这两天 Notepad++ 牛逼了,然后引发了大家的关注,具体事件内容请大家自行百度,其实作为文本编辑工 ...
随机推荐
- IOS-UIButton的文本与图片的布局
UIButton内部文本和图片的布局是我们日常代码中,不可缺少的部分,按钮默认左边图片右边文本,那要实现左边文本,右边图片,我们该怎么解决呢,上面图片,下面文本又该怎么办呢 其实很简单,今天总结下,目 ...
- 伪共享(False Sharing)和缓存行(Cache Line)
转载:https://www.jianshu.com/p/a9b1d32403ea https://www.toutiao.com/a6644375612146319886/ 前言 在上篇介绍Long ...
- OLT配置学习
1.console连接跟一般交换机一样,不赘述 2.修改系统名称 Add Hostname/Device Name: huawei(config)#system sys-info descriptio ...
- RabbitMQ(2) vhost、用户和权限
rabbitmq中,vhost提供了资源隔离机制.同时,通过为用户设置vhost粒度的权限,可以实现丰富的权限控制功能. vhost 在rabbitmq中,可以创建被称为虚拟主机(vhost)的虚拟消 ...
- spring 核心接口之 Ordered
Spring中提供了一个Ordered接口.从单词意思就知道Ordered接口的作用就是用来排序的.Spring框架是一个大量使用策略设计模式的框架,这意味着有很多相同接口的实现类,那么必定会有优先级 ...
- js 验证对象是否为数组
一.方法一:用到了原型 由于typeof检测数组,只会显示其为object,并不会详细到告诉我们是否为array,所以我们可以自己写个js用原型来检测: <script> /** * * ...
- 虚拟机下的centos断电(非正常关机)后mysql启动不了
在windows2003安装了vbox来部署centos. 但无法完美设置开机启动虚拟机里的系统. 只能把启动脚本放到用户的启动项里. server.bat "C:\Program File ...
- iOS二维码、条形码生成(可指定大小、颜色)
一.前言: iOS7.0之后可以利用系统原生 API 生成二维码, iOS8.0之后可以生成条形码, 系统默认生成的颜色是黑色. 在这里, 利用以下方法可以生成指定大小.指定颜色的二维码和条形码, 还 ...
- OC-初识面向对象
面向对象和面向过程思想 OC是面向对象的,C是面向过程的.面向对象和面向过程只是解决问题的两种不同思想 面向对象和面向过程的区别 以用电脑听歌为例子 面向过程 打开电脑 播放电脑中的歌曲 关闭电脑 面 ...
- NODE 开发 2-3年工作经验 掌握的相关知识
文章 部分答案 内存