用r.js优化require/backbone前端项目

目的 将用 RequireJs 和 BackboneJs 开发的 WEB 项目打包发布 将所有模块的 js 压缩到一个 js 文件中 将所有的 css 压缩到一个 css 文件中 从而减少网络访问次数,提升用户体验 步骤 1. 安装 node.js 直接下载安装即可 https://nodejs.org/download/ 2. 安装 requireJs 模块 1 npm install -g requirejs 可能需要 sudo 权限。 3. 安装 almond.js 在项目根目录下运行以下命令: 1 bower install almond 关于 almond 可以到 https://github.com/jrburke/almond 了解。 4. 在项目根目录新建一个 build.js 文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 /** * r.js config * See all the options and more at: * https://github.com/jrburke/r.js/blob/master/build/example.build.js */ ({ mainConfigFile: 'js/main.js', baseUrl: 'js', fileExclusionRegExp: /^(r|build)\.js$/, name: '../bower_components/almond/almond', out: './dist/js/shop.min.js', optimize: 'uglify2', /* none or uglify2 */ include: [ 'main', 'views/FirstView', 'views/TimePeriodView', 'views/WelcomeView', 'views/bath/BathView', 'views/beauty/BeautyView', 'views/store/CommodityView', 'views/store/CommodityDetailView', 'views/cart/CartView', 'views/address/AddressView', 'views/order/OrderView', 'views/evaluate/EvaluateView', 'views/coupon/CouponView', 'views/pay/PayView' ] }) mainConfigFile:指定 requirejs 的入口文件 baseUrl:指定 requirejs 的 js 目录 fileExclusionRegExp:排除规则,满足条件的文件不会被优化 name:指定 almond 所在目录 out:指定优化后的输出文件 optimize:压缩方式 include:要优化的模块,必须包含 main,其它复制 router.js 里指定的 View 文件路径 5. 执行 build.js 1 r.js -o build.js 可能需要 sudo 权限,运行后项目根目录多了个 dist 文件夹,过程可能报错,根据报错信息处理即可。 ...

2015年6月24日 · 1 分钟 · 209 字 · Codesve