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

};