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 进行加载。

转载于:https://www.cnblogs.com/m2maomao/p/7766399.html