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,

在頁面上引入這個文件也可以了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM