云平台项目--学习经验--打包压缩工具requirejs

时间:2022-03-21 08:23:56

requirejs是一个JavaScript模块加载器。适合在浏览器中国使用,也可以在其他脚本环境使用,它鼓励了代码的模块化。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。
如何加载RequireJS呢?
  假如项目中的JS都放在一个"script"目录下,例如有个index.html和一些script,则该布局如下:
  项目目录:
  ·index.html
  ·scripts/
    ·main.js
    ·helper/
      ·until.js
添加require.js到scripts目录下,则该目录如下:
  ·index.html
  ·scripts/
    ·main.js
    ·require.js
    ·helper/
      ·until.js
为了充分利用该优化工具,可将所有的scripts放到HTML外面,然后只引用RequireJS来请求加载其他script:
可以只写一个main.js,通过它来加载你所需要运行的scripts,这可以保证你所需要的Scripts都是在这里加载的。
例如:
<!DOCTYPE html>
  <html>
    <head>
      <title>REQUIREJS</title>
      <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
      <h1>test</h1>
    </body>
</html>

RequireJS以一个相对baseUrl的地址来加载所有代码,页面顶层<script>标签含有一个特殊的属性data-main,require.js用它来启动脚本加载过程,而baseUrl一般设置与该属性相一致的目录。下列示例中展示了baseUrl的设置:
<script data-main="scripts/main.js" src="scripts/require.js"></script>
baseUrl可以通过RequireJS config手动设置。如果没有显式指定config以及data-main,默认boseUrl包含RequireJS那个HTML页面所属的目录。

实际应用中,可将项目库和第三方库分开,为一扁平结构。
如:
  ·index.html
  ·js/
  ·app/ *项目库*
    ·sub.js
  ·lib/ *第三方库*
    ·jquery.js
    ·canvas.js
  ·app.js

则index.html:
<script data-main="js/app.js" src="js/require.js"></script>

app.js:
requirejs.config({
  baseUrl: 'js/lib',
  paths: {
  app: '../app'
  }
});
requirejs(['jquery', 'canvas', 'app/sub'],
function ($, canvas, sub) {

});

在实际项目中,是这样的:
·web/
  ·default.html
  ·js/
    ·第三方库
  ·module_js/
    ·原生js
    ·main.js
在main.js中,首部写法如下:
require(["Log","Play"....],function(doc,inc,Log....){内容函数}); //注意没有后缀

而在default.html中,首部写法如下:
通过定义一个require:
var require = {
  baseUrl: "module_js", //baseUrl
  urlArgs: '1.8.4',
  map:{
    "*":{
      css:"../js/css"
      }
    }  
};
require.paths={
  "jasmine":"../spec/jasmine-2.5.2/jasmine",
  "jasmine-html":"../spec/jasmine-2.5.2/jasmine-html",
  "runJasmine":"../spec/test/run",
  "jquery":"../js/jquery.min",
....................
};