JS模块化规范——CommonJS相关笔记

CommonJS

一、规范

1.1 说明

• http://wiki.commonjs.org/wiki/Modules/1.1
• 每个文件都可当作一个模块
• 在服务器端: 模块的加载是运行时同步加载的
• 在浏览器端: 模块需要提前编译打包处理

1.2 基本语法

• 暴露模块
  • module.exports = value
  • exports.xxx = value
  • 问题: 暴露的模块到底是什么?
• 引入模块
  • require(xxx)
    • 第三方模块:xxx为模块名
    • 自定义模块: xxx为模块文件路径

二、实现

2.1 基于服务端（Node）实现

Node.js官方文档：http://nodejs.cn/

1. 下载安装node.js
2. 创建项目结构

|-modules
  |-module1.js
  |-module2.js
  |-module3.js
|-app.js
|-package.json
  {
    "name": "commonJS-node",
    "version": "1.0.0"
  }

其中package.json文件通过命令行工具进入所在根目录，再输入命令npm init -y创建(-y指快速生成)

3. 下载第三方模块

• npm install uniq --save
  

4. 模块化编码

• module1.js

  module.exports = {
    foo() {
      console.log('moudle1 foo()')
    }
  }
  

• module2.js

  module.exports = function () {
    console.log('module2()')
  }
  

• module3.js

  exports.foo = function () {
    console.log('module3 foo()')
  }
  
  exports.bar = function () {
    console.log('module3 bar()')
  }
  

• app.js

  /**
    1. 定义暴露模块:
      module.exports = value;
      exports.xxx = value;
    2. 引入模块:
      var module = require(模块名或模块路径);
   */
  "use strict";
  //引用模块
  let module1 = require('./modules/module1')
  let module2 = require('./modules/module2')
  let module3 = require('./modules/module3')
  
  let uniq = require('uniq')
  let fs = require('fs')
  
  //使用模块
  module1.foo()
  module2()
  module3.foo()
  module3.bar()
  
  console.log(uniq([1, 3, 1, 4, 3，11]))   // uniq根据数字第一位的编码进行排序
  
  

5. 通过node运行app.js

• 命令: node app.js

2.2 浏览器端实现（Browserify）

官网：http://browserify.org/

Browserify也称为CommonJS的浏览器端的打包工具

2.2.1 Browserify模块化使用教程

1. 创建项目结构

|-js
  |-dist //打包生成文件的目录
  |-src //源码所在的目录
    |-module1.js
    |-module2.js
    |-module3.js
    |-app.js //应用主源文件
|-index.html
|-package.json
  {
    "name": "browserify-test",
    "version": "1.0.0"
  }

2. 下载browserify

• 全局:npm install browserify -g
• 局部: npm install browserify --save-dev

-dev 表示开发依赖，运行依赖则不需要

开发依赖指当前这个只在在开发环境使用它

运行依赖指在生产环境需要

这里browserify这个工具只是在开发的时候帮助我们去编译打包，一旦上线就跟它没有关系了，所以这里只需要生产依赖

3. 定义模块代码

• module1.js

  module.exports = {
    foo() {
      console.log('moudle1 foo()')
    }
  }
  

• module2.js

  module.exports = function () {
    console.log('module2()')
  }
  

• module3.js

  exports.foo = function () {
    console.log('module3 foo()')
  }
  
  exports.bar = function () {
    console.log('module3 bar()')
  }
  

• app.js (应用的主js)

  //引用模块
  let module1 = require('./module1')
  let module2 = require('./module2')
  let module3 = require('./module3')
  
  //使用模块
  module1.foo()
  module2()
  module3.foo()
  module3.bar()
  
  

• 打包处理js:

  • 在命令行工具输入命令：

    browserify js/src/app.js -o js/dist/bundle.js  
    

• 页面使用引入:

  <script type="text/javascript" src="js/dist/bundle.js"></script> 
  

2.3 区别Node与Browserify

• Node.js运行时动态加载模块(同步)
• Browserify是在转译(编译)时就会加载打包(合并)require的模块