RequireJS模块化后JS压缩合并
来源:互联网 发布:淘宝拒签退款流程 编辑:程序博客网 时间:2024/05/21 17:00
使用RequireJS模块化后代码被拆分成多个JS文件了,在部署生产环境需要压缩合并,RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩。r.js非常强大,不但可以压缩js,css,甚至可以对整个项目进行打包。
r.js的压缩工具使用UglifyJS或Closure Compiler。默认使用UglifyJS(jQuery也是使用它压缩)。此外r.js需要node.js环境,当然它也可以运行在Java环境中如Rhino。JAVA环境使用Ant构建可以参考另外一篇RequireJS optimizer Ant task有介绍。node环境参考RequireJS模块化与GruntJS构建。
本篇介绍require.js官方文档中介绍的方法。
build.xml
{
appDir:
'../www'
,
baseUrl:
'js/lib'
,
paths: {
app:
'../app'
},
dir:
'../www-built'
,
modules: [
//First set up the common build layer.
{
//module names are relative to baseUrl
name:
'../common'
,
//List common dependencies here. Only need to list
//top level dependencies, "include" will find
//nested dependencies.
include: [
'jquery'
,
'app/lib'
,
'app/controller/Base'
,
'app/model/Base'
]
},
//Now set up a build layer for each page, but exclude
//the common one. "exclude" will exclude nested
//the nested, built dependencies from "common". Any
//"exclude" that includes built modules should be
//listed before the build layer that wants to exclude it.
//"include" the appropriate "app/main*" module since by default
//it will not get added to the build since it is loaded by a nested
//require in the page*.js files.
{
//module names are relative to baseUrl/paths config
name:
'../page1'
,
include: [
'app/main1'
],
exclude: [
'../common'
]
},
{
//module names are relative to baseUrl
name:
'../page2'
,
include: [
'app/main2'
],
exclude: [
'../common'
]
}
]
}
在node环境下执行 node r.js -o build.js 就可以压缩合并模块。
项目参考https://github.com/requirejs/example-multipage/blob/master/tools/build.js
0 0
- RequireJS模块化后JS压缩合并
- JS模块化工具requirejs
- JS模块化工具requirejs
- JS模块化开发(requireJS)
- JS模块化工具requirejs
- JS模块化工具requirejs
- JS模块化开发(requireJS)
- 【requirejs】初识JS模块化工具requirejs
- 模块化JS(RequireJS SeaJS)
- JS模块化工具requirejs教程
- js模块化加载(requirejs)
- JS:模块化工具requirejs教程
- 初识JS模块化工具RequireJS
- JS模块化工具requirejs(一)
- JS模块化工具requirejs教程
- JS模块化工具requirejs教程
- JS模块化工具requirejs教程
- JS模块化工具requirejs教程(一):初识requirejs
- Redux入门指南
- React/Router
- JS移动客户端--触屏滑动事件
- gulp详细入门教程
- gulp不完全入门教程
- RequireJS模块化后JS压缩合并
- RequireJS对文件合并与压缩实现方法
- SVN常用图标
- gulp的流与执行顺序
- HTML5无刷新修改Url,history pushState/replaceState
- webpack编译流程漫谈
- webpack学习之路
- 使用Redux管理你的React应用
- 轻松入门React和Webpack