grunt和seajs的打包初体验

来源：互联网发布：指纹识别算法源代码编辑：程序博客网时间：2024/06/05 15:50

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) 使用相对路径来互相引用模块是比较顺利打包的一个基石（个人感觉）

小小的实验前前后后整了一大天，以此文记之，也算是了结了这次尝鲜。

0 0