https://www.cnblogs.com/stephenykk/p/3678229.html 先安装r.js ~~~ $ npm install -g requirejs ~~~ 执行打包指令： ~~~ node r.js -o build.js ~~~ 在插件的目录下新建一个配置文件，例如 build.js（推荐使用这种方式） ~~~ node r.js -o build.js ~~~ 这样配置更方便，内容如下 ~~~ ({ // 程序的根路径 appDir: "./", // 脚本的根路径 // 相对于程序的根路径 baseUrl: "./js", // 打包输出到的路径 dir: "./dist", optimize:"uglify", // 需要打包合并的js模块，数组形式，可以有多个 // name 以 baseUrl 为相对路径，无需.js后缀 // 比如 main 依赖 a 和 b，a 又依赖 c，则 {"name": 'main'} 会把 c.js a.js b.js main.js 合并成一个 main.js modules: [ { name: "core" } ], // 通过正则以文件名排除文件/文件夹 // 比如当前的正则表示排除 .svn、.git 这类的隐藏文件 fileExclusionRegExp: /^\./ }) ~~~ 或者另一种配置,打包单个插件。首先将插件代码单独存放在一个站点下。 ~~~ ({ //设置插件的核心js相对根目录的路径 baseUrl: "./assets/libs/lr/ele/", //定义依赖 后续可以忽略打包 paths: { jquery: '../../jquery-3.2.1.min', lrBox: '../lrBox', core: './core', }, name: 'core', //插件的核心文件名 。 // 打包输出到的相对路径 out: "./assets/libs/lr/lrEle.mini.js", allowSourceOverwrites: true, optimize: 'uglify2', //closure uglify uglify2 exclude: ['jquery', 'lrBox'] }); ~~~ 基本参数介绍 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：`模块名； - `include：`额外引入的模块， `create：`如果不存在，是否创建。默认`false`； - `exclude：`要排除的模块。有些模块有公共的依赖模块，在合并的时候每个都会压缩进去，例如一些基础库。使用 exclude 就可以把这些模块在压缩在一个更早之前加载的模块中，其它模块不用重复引入。 其它事项 RequireJS 配置也可以放到 RequireJS Optimizer 配置文件里面，例如： { "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 的配置参数还有很多，完整的参数介绍可以看这里： 为方便运行，可以新建一个批处理文件： @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 语法定义的模块，因此下面这种通过变量定义的方式是不支持的： var mods = someCondition ? ['a', 'b'] : ['c', 'd']; require(mods); 而如果是这样定义则可以： require(['a', 'b']); 或者： define(['a', 'b'], function (a, b) {}); 进一步优化 使用 r.js 优化后的代码可以使用 almond 来加载。almond 是一个轻量的 AMD 加载器，提供了最基础的 AMD API 实现以及模块加载功能。almond 只有不到 400 行代码，要比 RequireJS 小很多。可以使用 r.js 把 almond 一起合并到业务代码的前面，如下： (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 进行加载。