转载 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) 
     
      })

而后执行node r.js -o build.js打包命令，生成的文件就能够用了。

能够点击这里看看

若是你们还有更好的打包方式，能够https://github.com/avalonjs/avalonjs.github.io/tree/master/zh/engineering ,添加到这里，pull request给我

转载来源：http://www.cnblogs.com/rubylouvre/p/4262569.html