javascript
requireJS对文件合并与压缩（二）
?
?
requireJS對文件合并與壓縮
? ?RequireJS提供了一個打包與壓縮工具r.js，r.js的壓縮工具使用UglifyJS進行壓縮的或Closure Compiler。r.js下載
? ?requireJS對互相依賴模塊進行合并與壓縮，可以對JS，CSS壓縮，甚至可以對整個項目進行打包。r.js是基于nodeJS的，所以本機電腦上需要有node環境。
下面還是來看看我整個項目結構吧，如下：
??
?現在是這樣的，app/a.js，app/b.js，app/c.js，app/d.js，有依賴關系，分別是a依賴于b，b依賴于c，c依賴于d，入口文件app.js，
代碼如下：
??a.js???
define(["app/b"],function (b) {
????? return {
?????????? "name":1
????? }
});
b.js
define(function(require, exports, module) {
??? var c = require('app/c');
});
c.js
define(function(require, exports, module) {
??? var d = require('app/d');
});
d.js
define(function(require, exports, module) {?
??? alert(1);
});
app.js
require(['app/a'],function(jq){
});
如果我不壓縮與合并代碼，那么我們在瀏覽器下看請求如下：
現在我們一步步來解釋下合并與壓縮吧！
一：打開cmd命令窗口，進入項目requirejs內，如下：
執行命令 node r.js –o baseUrl=js? name=app out=build.js命令即可，如上所示已經在根目錄下生成build.js了，我們下面再來看看目錄結構如下：
下面我們再來看看build.js代碼了，如下所示：
define("app/d",["require","exports","module"],function(e,t,n){alert(1)}),define("app/c",["require","exports","module","app/d"],function(e,t,n){var r=e("app/d")}),define("app/b",["require","exports","module","app/c"],function(e,t,n){var r=e("app/c")}),define("app/a",["app/b"],function(e){return{name:1}}),require(["app/a"],function(e){}),define("app",function(){});
已經對app.js，app/a.js，app/b.js，app/c.js，app/d.js，的代碼進行合并與壓縮了。
接著我們在index.html代碼要如下調用：
<!doctype html>
<html lang="en">
?<head>
? <meta charset="UTF-8">
? <title>Document</title>
? <script src="require.js" defer async="true" data-main="build"></script>
?</head>
?<body>?
?</body>
</html>
直接從build.js內進行加載，現在我們再來看看瀏覽器內的請求如下所示：
現在只有2個請求了，且也可以執行里面的代碼了。
下面我們對命令分別來做一下解釋：
-o：?表示優化，該參數是固定的，必選。
baseUrl：指存模塊的根目錄，可選。
name：?模塊的入口文件，這里是app,那么r.js會從baseUrl+name去查找app.js，然后找出所有依賴的模塊，然后進行合并與壓縮。
out:?指合并壓縮后輸出的文件路徑，這里是直接輸出在根目錄下build.js 我們也可以輸出到其他目錄下 比如js/app 目錄下，也可以的。
上面的demo已經可以對有依賴的模塊進行合并與壓縮了，但是目前還不能滿足我們的需求，因為代碼已經合并且壓縮了，對于我們調式代碼并不是很方便，所以我接下來給大家來介紹另外1個參數：
??1. optimize(none/uglify/colsure)，指定是否壓縮，默認為uglify。
? ?我們可以指定為none，只合并不壓縮。代碼如下：
命令如下：
node r.js –o baseUrl=js name=app out=build.js optimize=none.
現在我們再來看看build.js文件代碼截圖如下：
現在是所有的js文件在一個目錄下，那如果js文件在不同的文件夾下面呢？是不是也可以合并呢？當然可以，只要指定依賴就可以了，我們再來演示下。加入我現在js目錄下在新建一個文件叫app2,，如下所示：
現在在app2目錄下新建一個js文件，假如叫e.js，那么在app目錄下的d.js代碼要改成如下了：
define(function(require, exports, module) {
??? var d = require('app2/e');
});
對app2/e.js進行依賴即可。
我們再來運行下命令如下所示：
如上可以看到e.js也被合并與壓縮了。?
上面的是直接敲打命令，我們現在也可以先安裝r.js,安裝如下：
npm install –g requirejs
如下所示表示已經安裝成功了。
除了上面直接在命令行提供參數設置以外，也可以將參數寫入一個文件，假定配置名稱為config.js，
代碼如下：
({
??? baseUrl: "js",
??? name: "app",
??? out: "app-built.js"
})
然后進入相應的目錄，在命令行下使用r.js來運行config.js文件，如下所示：命令：node r.js ?-o config.js
我們再看看生成文件app-built.js，
在頁面上引入這個文件也可以了。
轉載于:https://www.cnblogs.com/nifengs/p/4883221.html
總結
以上是生活随笔為你收集整理的requireJS对文件合并与压缩（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ubuntu14.04 下emacs 2
- 下一篇： 每个人都有一条属于自己的路，既然来了这个