轉載 r.js打包經驗

時間 2019-11-30

原文原文鏈接

例子1css

先是HTML頁面html

 
      <!DOCTYPE html> 
     
      <html> 
     
          <head> 
     
              <title>My App</title> 
     
              <link rel="stylesheet" type="text/css" href="css/main.css"> 
     
              <script data-main="scripts/main-built" src="scripts/require.js"></script> 
     
          </head> 
     
          <body> 
     
              <h1>My App</h1> 
     
          </body> 
     
      </html>

js都放在scripts目錄下，換言之 html與scripts是平級。此目錄下有r.js, require.js, one.js, two.js, three.js, main.jsnode

上面HTML提到的main-built.js是一下子動態生成的。jquery

r.js 能夠在這裏找到https://github.com/jrburke/r.js/blob/master/dist/r.js，總共7MB，很是瘋狂！據說把各類狀況都hold住了，比spm強大多了！git

接着是幾個JS的內容：github

one.js

 
      define(function(){ 
     
          return 1 
     
      })

two.js

 
      define(function(){ 
     
          return 2 
     
      })

three.js

 
      define(function(){ 
     
          return 3 
     
      })

main.js

 
      require(["one", "two", "three"], function (one, two, three) { 
     
          alert(one+two+three) 
     
      });

好了，咱們再看一下build.js如何寫後端

 
      ({ 
     
          baseUrl: ".", 
     
          name: "main", 
     
          out: "main-built.js" 
     
      })

定位到此目的，執行node r.js -o build.jsruby

最後生成main-built.js文件，我格式化它一下，裏面內容以下：服務器

 
      define("one",[],function(){return 1}), 
     
      define("two",[],function(){return 2}), 
     
      define("three",[],function(){return 3}), 
     
      require(["one","two","three"],function(e,t,n){alert(e+t+n)}),define("main",function(){});

最後運行服務器，發現真的能alert出6！ui

能夠點擊這裏看看

例子2

就是在上面的例子裏面改一下

其餘變化以下：

three.js放到sub目錄下，內容改爲：

 
      define(["./two"], function(a){ 
     
          return 1 + a 
     
      })

one.js

 
      define(["./two"], function(a){ 
     
          return 1 + a 
     
      })

main.js改爲

 
      require(["one","sub/three"], function (one,  three) { 
     
          console.log(one + three) 
     
      })

執行r.js，生成main-built.js爲：

 
      define("two", [], function() { 
     
          return 2 
     
      }), define("one", ["./two"], function(e) { 
     
          return 1 + e 
     
      }), define("sub/three", [], function() { 
     
          return 30 
     
      }), require(["one", "sub/three"], function(e, t) { 
     
          console.log(e + t) 
     
      }), define("main", function() { 
     
      });

下面合併先後的請求數比較

例子3， paths配置項的使用

目錄結構改爲這樣，jquery自行到官網下載

main.js改爲這樣

 
      require.config({ 
     
          paths: { 
     
              jquery: "jquery/jquery-1.11.2" 
     
          } 
     
      }) 
     
      require(["one", "sub/three","jquery"], function(one, three, $) { 
     
          console.log(one + three) 
     
          console.log($) 
     
      });

main.js改爲這樣

 
      ({ 
     
          baseUrl: ".", 
     
          name: "main", 
     
          paths: { 
     
              jquery: "jquery/jquery-1.11.2" 
     
          }, 
     
          out: "main-built.js" 
     
      })

而後執行node r.js -o build.js打包命令，生成的文件就能夠用了。而且發現r.js有個很是智能的地方，若是把main.js中的require語句的依賴項中的jquery去掉，再執行打包，它會將jquery源碼從main-built.js中去掉。

能夠點擊這裏看看

例子4, 讓生產環境用的腳本放在另外一個文件中

咱們一般把咱們本身工做的環境叫作發展環境，上線的環境叫生產壞境，將它們分開是很是有好處的。咱們把上面的目錄複製一下，改一名字：

相對而言，頁面也改一下

 
      <!DOCTYPE html> 
     
      <html> 
     
          <head> 
     
              <meta charset="utf-8"/> 
     
              <title>My App</title> 
     
              <link rel="stylesheet" type="text/css" href="css/main.css"> 
     
              <script data-main="develop/main-built" src="develop/avalon.js"></script> 
     
              <!--    <script data-main="develop/main" src="develop/avalon.js"></script>--> 
     
              <!--    <script data-main="develop/main-built" src="develop/require.js"></script>--> 
     
          </head> 
     
          <body> 
     
              <h1>My App</h1> 
     
          </body> 
     
      </html>

打包的腳本build.js變成這樣，

 
      ({ 
     
          baseUrl: ".", 
     
          paths: { 
     
              jquery: "jquery/jquery-1.11.2" 
     
          }, 
     
          dir: "../production", 
     
          name: "main" 
     
      })

對比一下，有了dir，就不能使用out配置項了，你在編譯時它有很是明確的提示。執行node r.js -o build.js打包命令，你的項目變成這樣了

既然目錄變了，咱們有兩個辦法，1本身修改或經過腳本修改index.html引用腳本的路徑，2後端配置一下，對請求進行重定向，咱們一般是使用後面一種。

能夠點擊這裏看看

例子5, shim配置項的使用

在例子4裏面jquery目錄添加一個jquery.aaa.js，內容以下：

 
      jQuery.fn.aaa = function(){ 
     
          alert("aaa") 
     
      }

main.js改爲

 
      require.config({ 
     
          paths: { 
     
              jquery: "jquery/jquery-1.11.2", 
     
              aaa: "jquery/jquery.aaa" 
     
          }, 
     
          shim: { 
     
              aaa: { 
     
                  deps: ["jquery"], 
     
                  exports: "jQuery" 
     
              } 
     
          } 
     
      }) 
     
      require(["one", "sub/three", "aaa"], function(one, three, $) { 
     
          console.log(one + three) 
     
          console.log($.fn.aaa) 
     
      })

build.js也跟着改爲

 
      require.config({ 
     
          paths: { 
     
              jquery: "jquery/jquery-1.11.2", 
     
              aaa: "jquery/jquery.aaa" 
     
          }, 
     
          shim: { 
     
              aaa: { 
     
                  deps: ["jquery"], 
     
                  exports: "jQuery" 
     
              } 
     
          } 
     
      }) 
     
      require(["one", "sub/three", "aaa"], function(one, three, $) { 
     
          console.log(one + three) 
     
          console.log($.fn.aaa) 
     
      })