原文地址：

未压缩合并的演示地址：

学习seaJs的模块化开发，适合对seajs基础有所了解的同学看，目录结构

js —

—dist   //压缩后的目标文件夹

—lib   //各个模块

             —drag    //拖拽模块

             —scale   //缩放模块

             —seajs    //seajs库

—seajs_drag    //入口的主文件main.js

              —main.js

/*———————————————————————————————————————————–*/

首先是seajs_drag.html

　　

main.js中分别引入模块的功能（拖拽，缩放），这样后面如果增加了功能只需在主文件main.js中引入即可。

define(function(require, exports, module){var inp = document.getElementById("inp");var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");var div3 = document.getElementById("div3"); var drag = require('../lib/drag/drag.js');drag.drag(div3);// require("../lib/drag/drag.js").drag(div3); // require('../lib/modal/modal.js');inp.onclick = function () {div1.style.display = "block"; // var scale = require('../lib/scale/scale.js');// scale.scale(div1, div2);// 按需异步加载var scale = require.async('../lib/scale/scale.js', function(e){e.scale(div1, div2);}); }})

　　

/*———————————————————————————————————————————–*/

然后是利用grunt打包

package.json为

{“name”: “drag”,“version”: “1.0.0”,“description”: “this is a grunt example for seajs”,“main”: “Gruntfile.js”,“scripts”: {“test”: “echo \”Error: no test specified\” && exit 1″},“author”: “”,“license”: “ISC”,“devDependencies”: {“grunt”: “^0.4.5″,“grunt-cmd-concat”: “^0.2.8″,“grunt-cmd-transport”: “^0.5.1″,“grunt-contrib-clean”: “^0.6.0″,“grunt-contrib-copy”: “^0.8.0″,“grunt-contrib-uglify”: “^0.9.1″}}

　　

可以下载代码包后，npm install，一般npm init后就会生成初始的内容，然后npm install 包名 -save-dev 就会添加到package.json中

Gruntfile.js文件内容

module.exports = function(grunt) { grunt.initConfig({/*** step 1:* 将入口文件拷贝到 产出目录*/copy: {hellosea:{files:{"js/dist/drag.js" : ["js/seajs_drag/main.js"]} }}, /*** step 2:* 创建一个临时目录* 将需要合并的js文件转为具名函数，并保持独立地保存在这个临时目录*/transport: {drag: {options: {// // 是否采用相对地址relative: true,// // 生成具名函数的id的格式 默认值为 {
      {family}}/{
      {name}}/{
      {version}}/{
      {filename}}format: './js/dist/{
      {filename}}'// // paths: [buildDir],// // include: 'all' }, files: [{expand: true,// 相对路径地址'cwd':'',// 需要生成具名函数的文件集合'src':['./js/dist/drag.js', './js/lib/drag/drag.js', './js/lib/scale/scale.js', './js/lib/rang/rang.js'],// 生成存放的文件目录。里面的目录结构与 src 里各个文件名带有的目录结构保持一致'dest':'.build'}]}}, /*** step 3:* 将临时目录下独立的具名函数文件 合并为 1个 js 文件* 将这个合并的 js 文件 拷贝到 我们的输出目录*/concat: {drag: {options: {// 是否采用相对地址relative: true},files: {// 合并后的文件地址'js/dist/drag.js': ['.build/js/dist/drag.js', '.build/js/lib/drag/drag.js', '.build/js/lib/scale/scale.js', '.build/js/lib/rang/rang.js']}}}, /*** step 4:* 压缩 这个 合并后的 文件*/uglify: {drag: {files: {'js/dist/drag.js': ['js/dist/drag.js'] //对dist/application.js进行压缩，之后存入dist/application.js文件}}}, /*** step 5:* 将这个临时目录删除*/clean: {build: ['.build']}}); grunt.loadNpmTasks('grunt-cmd-transport');grunt.loadNpmTasks('grunt-cmd-concat');grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-clean');grunt.loadNpmTasks('grunt-contrib-copy'); grunt.registerTask('default', ['copy','transport', 'concat', 'uglify', 'clean']); //}

　　

这里要注意文件分别的路径，不知道插件如何用可以到官网查看， ，可以分别搜索相应的插件后查看用法。

还要注意的是，在seaJs中，ID与路径一致的原则， ，具体的需要自己多看，多找，多实践。

代码包：

演示地址：

参考：