JS模块化-历史、构建工具

服务器端的JS模块化

• commonJS规范（nodeJS的出现（http://nodejs.org/））
  （http://www.commonjs.org/）

---

浏览器JS的模块化

• AMD规范（http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition）
  requireJS库（http://requirejs.org/ )
• CMD规范
  Seajs采用的

---

构建工具 gruntjs（ http://gruntjs.com/ ）

• 安装流程：
  -先安装nodejs和npm(包管理工具)
  -npm install -g grunt-cli
  -npm install grunt –save-dev
  -grunt –versionnpm install grunt –save-dev

• 使用流程
  -1.从官网找到需要用到的插件名字，配置到package.json文件中。
  -2.配置GruntFile.js文件。
  -3.运行npm install 安装配置的插件（对应package.json文件）。
  -4.运行grunt（对应GruntFile.js文件）。

---

seajs构建的问题

上线的版本，比如合并操作，define应多出两个参数。
第一个参数：当前模块的ID
第二个参数：当前模块所依赖的模块的数组

---

Seajs + gruntjs开发

grunt-cmd-transport（提取ID和依赖）——解决seajs构建的问题，即自动完成上述的给define加两个参数。
grunt-cmd-concat（合并）
grunt-contrib-clean（清除构建过程中的临时文件）

{//package.json  "name": "webqq",  "version": "0.1.0",  "devDependencies": {    "grunt": "~0.4.5",    "grunt-cmd-transport" : "~0.3.0",    "grunt-cmd-concat": "~0.2.7",    "grunt-contrib-uglify": "~0.3.2"  }}

//GruntFile.jsmodule.exports = function(grunt) {  grunt.initConfig({    pkg: grunt.file.readJSON('package.json'),    transport: {      webqq: {        files: {          '.bulid' : ['main.js','drag.js','scale.js','range.js']        }      }    },    concat: {      webqq: {          files: {              'dist/main.js': ['.bulid/main.js','.bulid/drag.js','.bulid/scale.js','.bulid/range.js']          }      }    },    uglify:{      webqq: {        files: {          'dist/main.min.js': ['dist/main.js']        }      }    }  });  grunt.loadNpmTasks('grunt-cmd-transport');  grunt.loadNpmTasks('grunt-cmd-concat');  grunt.loadNpmTasks('grunt-contrib-uglify');  grunt.registerTask('default', ['transport','concat','uglify']);};