seajs作为前端模块加载器,在依赖管理方面是挺方便的,用起来也还算比较简单。不过,由于模块化使得模块划分比较细,所以加载一个页面将会发起多次http请求,这在生产环境中是不可接受的。一般而言,生产环境下,资源会放在CDN,而资源本身,通常会进行合并及压缩。
grunt 是 js 的一个著名的打包工具,可以作为node的一个包,使用npm安装使用。为了进一步探索seajs在真实场景下可能会是一种怎样的使用情况,本文将使用grunt进行seajs的打包测试。
本文假定资源域名为: static.test.com , 使用host映射到 127.0.0.1 , 本文假设读者知道 node 和 npm。
创建的项目结构如下:
1部分为页面,为简单起见,只有一个商城手机端首页
2部分为打包需要的一些node包,使用npm下载的
3部分为一些js模块, js-build为打包后的资源
首先,定义好 package.json
{
"name": "mall",
"version": "0.1.0",
"dependencies": {
"grunt": "^0.4.5",
"grunt-cmd-concat": "^0.2.8",
"grunt-cmd-transport": "^0.4.1",
"grunt-contrib-uglify": "^0.2.7"
}
}
然后进入到 package.json目录, 直接 npm install, 这样将会生成 node_modules。
接着看看我们的 index.jsp 页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商城首页</title>
</head>
<body>
商城首页
<jsp:include page="resource.jsp"></jsp:include>
<script>
// 加载入口模块
seajs.use("mall/index/index.js");
</script>
</body>
</html>
引用了统一的 resource.jsp , 同时 seajs 入口 为 mall/index/index.js 这个文件。
resource.jsp 的内容如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<script src="http://static.test.com/plugin/js/sea-debug.js" id="seajsnode"></script>
<script>
// seajs 的简单配置
seajs.config({
base: "http://static.test.com/js-build/",
map:[
[".js" , "-min.js"]
],
alias: {
}
});
</script>
非常的简单, 当我们这样编写代码后,实际上,seajs会去加载 http://static.test.com/js-build/mall/index/index-min.js 这个文件,这是我们 index的最终版,我们来看看index.js 里面的内容
/**
* 手机商城首页
*/
define(function(require , exports , module){
var header = require("../common/header");
var footer = require("../common/footer");
var content = require("../index/content");
header.self();
exports.self = function(){
alert("index content.js");
}
});
它是一个标准的cmd模块,依赖了其它三个模块,我们想要的结果就是,最终 header.self 会 alert出内容,那么基本就正确了。 其它模块也是标准的cmd模块,内容就不看了。
接着, grunt上场了,先配置好 Gruntfile.js,内容如下:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
options: {
},
transport: { // 给 cmd 模块 提取 id 以及 依赖
target_name: {
files: [{
expand: true,
cwd: 'static/js/',
src: '**/*.js',
dest: 'static/js-build/'
}]
}
},
concat: { // 把 index.js 这个模块 以及 其依赖的所有模块 统一 合并为 index-transport.js 这个文件
index: {
options: {
include: 'all'
},
files: {
'static/js-build/mall/index/index-transport.js': ['static/js-build/mall/index/index.js']
}
}
},
uglify: { // 对合并后的文件进行压缩
index: {
options:{
sourceMap: 'static/js-build/mall/index/index-min.js.map' // chrome下支持压缩js调试
},
files: {
'static/js-build/mall/index/index-min.js': ['static/js-build/mall/index/index-transport.js']
}
}
}
});
// 加载三个插件
grunt.loadNpmTasks('grunt-cmd-transport');
grunt.loadNpmTasks('grunt-cmd-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 定义任务
grunt.registerTask('default', ['transport' , 'concat' , 'uglify']);
};
准备好之后,直接在 Gruntfile.js 同级目录下 grunt , 就会得到 index-min.js 这个最终版的文件
启动服务器,便可以访问 index.jsp 这个页面了,而且 js 的加载也是正常的,也确实alert出来了。
不过可能是我浏览器的问题, sourcemap 并没有加载。
整个过程看着东西虽然不多,但真实操作的时候,才知道是多么折腾,怪不得很多人都在抱怨,seajs用起来容易,打包TMD太难了。
一些小感悟:
1) 如果使用了 seajs的alias和paths,打包可能会有各种意想不到的吭
2) grunt 相关插件的版本,也是一个大吭,打包过程可能会有各种不顺,也是由于插件包版本要不然太高,要不然又太低了,导致的各种问题,无奇不有。
3) 使用相对路径来互相引用模块是比较顺利打包的一个基石(个人感觉)
小小的实验前前后后整了一大天,以此文记之,也算是了结了这次尝鲜。