grunt和seajs的打包初体验

最新推荐文章于 2022-07-09 16:31:52 发布

那个天真的人

最新推荐文章于 2022-07-09 16:31:52 发布

阅读量1.7k

点赞数

分类专栏： javascript 文章标签： grunt打包 seajs打包 grunt+seajs打包

本文链接：https://blog.csdn.net/yanyan19880509/article/details/49106005

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
grunt和seajs的打包初体验

seajs作为前端模块加载器，在依赖管理方面是挺方便的，用起来也还算比较简单。不过，由于模块化使得模块划分比较细，所以加载一个页面将会发起多次http请求，这在生产环境中是不可接受的。一般而言，生产环境下，资源会放在CDN，而资源本身，通常会进行合并及压缩。 grunt 是 js 的一个著名的打包工具，可以作为node的一个包，使用npm安装使用。为了进一步探索seajs在真实场景下可能
复制链接

扫一扫

专栏目录