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.js
module.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']);

};