开发总结 — requirejs篇(配置及使用)

作者:杨润炜
日期:2016/1/11 11:11

requirejs-logo

官网文档云:

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

本站后台用requirejs+angularjs搭建的,现在此简述一下requirejs的配置及使用。

配置

配置文件(requirejs-config.js)

  1. requirejs.config({
  2. // 所有模块的查找根路径(window.staticDomain为url形式)
  3. baseUrl: window.staticDomain || '',
  4. // path config是相对 baseUrl 解析的,而且不用包含".js",因为 path config 指向的可能是目录
  5. paths :{
  6. jquery :'bower_components/jquery/dist/jquery',
  7. bootstrap :"bower_components/bootstrap/dist/js/bootstrap",
  8. underscore :'bower_components/underscore/underscore',
  9. md5 :'bower_components/js-md5/js/md5',
  10. angular :'bower_components/angular/angular',
  11. // 缩短加载的目录
  12. C:'js/controllers'
  13. },
  14. // 为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置
  15. shim :{
  16. // exports: 设置加载该模块后的默认全局变量;deps:设置该模块的默认依赖模块
  17. 'jquery' :{exports:'$'},
  18. 'underscore' :{exports:'_'},
  19. 'md5' :{exports:'md5'},
  20. 'angular' :{deps:['jquery']},
  21. 'C/module':{deps:['jquery']}
  22. }
  23. });

使用

合并优化配置文件(build.js)

  1. {
  2. // app顶级目录,非必选项。如果指定值,baseUrl则会以此为相对路径
  3. 'appDir':'../js',
  4. // 模块根目录。默认情况下所有模块资源都相对此目录。
  5. // 若该值未指定,模块则相对build文件所在目录。
  6. // 若appDir值已指定,模块根目录baseUrl则相对appDir。
  7. 'baseUrl':'./',
  8. // 指定输出目录,若值未指定,则相对 build 文件所在目录
  9. 'dir' :'../js-dist',
  10. // 设置模块别名
  11. // RequireJS 2.0 中可以配置数组,顺序映射,当前面模块资源未成功加载时可顺序加载后续资源
  12. 'paths' :{
  13. 'jquery' :'../bower_components/jquery/dist/jquery',
  14. 'bootstrap' :'../bower_components/bootstrap/dist/js/bootstrap',
  15. 'underscore' :'../bower_components/underscore/underscore-min',
  16. 'md5' :'../bower_components/js-md5/js/md5',
  17. 'angular' :'../bower_components/angular/angular',
  18. 'C':'controllers'
  19. },
  20. // 模块的依赖与导出
  21. 'shim' :{
  22. 'jquery' :{exports:'$'},
  23. 'underscore' :{exports:'_'},
  24. 'md5' :{exports:'md5'},
  25. 'angular' :{deps:['jquery']},
  26. 'C/module':{deps:['jquery']}
  27. },
  28. // 2.1.11中:如果dir被声明且不为”none”,并且skipDirOptimize 为false,通常所有的JS文件都会被压缩,这个值自动设置为”all”。
  29. // 为了让JS文件能够在压缩过正确执行,优化器会加一层define()调用并且会插入一个依赖数组。当然,这样会有一点点慢如果有很多文件或者有大文件的时候。
  30. // 所以,设置该参数为”skip”这个过程就不会执行,如果optimize设置为”none”也一样。如果你想手动设置值的话:
  31. // 1)优化后:如果你打算压缩没在modules声明的JS文件,在优化器执行过后,你应该设置这个值为”all”
  32. // 2)优化中:但在动态加载过后,你想做一个会文件优化,但不打算在动态加载这些文件可以设置成”skip”
  33. // 最后:所有生成的文件(无论在不在modules里声明过)自动标准化
  34. "normalizeDirDefines": "skip",
  35. // 模块设置
  36. 'modules':[
  37. {
  38. // 模块 alias 名称
  39. 'name':'main',
  40. // 不打包的依赖模块
  41. 'exclude': [
  42. 'jquery'
  43. ]
  44. }
  45. ]
  46. }

入口文件(index.jade):

  1. script(src="#{staticDomain}/bower_components/requirejs/require.js")
  2. script(src="#{staticDomain}/js/requirejs-config.js")
  3. if config.ENV !== 'dev'
  4. //- 生产及测试环境
  5. script(src="#{staticDomain}/js-dist/bower_components/jquery/jquery.js")
  6. script(src="#{staticDomain}/js-dist/main.js")
  7. else
  8. //- 本地环境
  9. script(src="#{staticDomain}/js/bower_components/jquery/jquery.js")
  10. script(src="#{staticDomain}/js/main.js")

参考资料

r.js 配置文件 example.build.js 不完整注释
requirejs中文文档

感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/16.html
邮箱:glowrypauky@gmail.com
QQ: 892413924