JS模块化方案(3)之CommonJS

一、基本介绍

服务端的javascript平台Node的模块化方案。一个文件一个模块。
详细介绍：NodeJS——模块化commonjs

二、基础语法：

1、模块定义

   function common(){
      return "common";
   }

   // 对外提供接口
   module.exports = common;


  对象：(两种)
① exports.A=a;
  exports.B=b;
②
 module.exports=  {A:A,B:B,C:C}

函数：(只有一种)
 module.exports=  {
  CMCFMenuBtn:CMCFMenuBtn,
  changeFocus:changeFocus,
  drag:drag,
  swiper:swiper
 } 

2、如何依赖模块

语法：模块对象 = require引入模块依赖

//require函数的返回值：define中的module.exports
var common =  require('./common/common.js');

3、页面中加载模块

• 打包js文件
• 在界面中引用

3.1、Browserify打包JS文件

browserify 入口文件 -o 目标文件

browserify ./index.js -o ./dist/main.js

<script src="./dist/main.js"></script>

3.2、webpack 打包JS文件

webpack  ./index.js  ./dist/index.js

<script src="./dist/index.js"></script>

三、案例：

index.html

<script src="./dist/index.js"></script>

common.js

function common(){
    return "common";
}
module.exports = common;

damu.js

function A(){
    //require函数的返回值：define中的module.exports
    var common =  require('./common/common.js');
    console.log("A from damu&"+ common());
}

function B(){
    var common =  require('./common/common.js');
    console.log("B from damu&"+ common());
}

function C(){
    var common =  require('./common/common.js');
    console.log("C from damu&"+ common());
}

exports.A =A;
exports.B =B;
exports.C =C

hsp.js

function A(){
    //require函数的返回值：define中的module.exports
    var common =  require('./common/common.js');
    console.log("A from hsp&"+ common());
}

function B(){
    var common =  require('./common/common.js');
    console.log("B from hsp&"+ common());
}

function C(){
    var common =  require('./common/common.js');
    console.log("C from hsp&"+ common());
}

module.exports = {
    A:A,
    B:B,
    C:C
}

tg.js

function A(){
    //require函数的返回值：define中的module.exports
    var common =  require('./common/common.js');
    console.log("A from tg&"+ common());
}

function B(){
    var common =  require('./common/common.js');
    console.log("B from tg&"+ common());
}

function C(){
    var common =  require('./common/common.js');
    console.log("C from tg&"+ common());
}

module.exports = {
    A:A,
    B:B,
    C:C
}

入口index.js

window.onload=function(){
    var damu = require("./damu.js");
    var hsp = require("./hsp.js");
    var tg = require("./tg.js");

    damu.C();
    hsp.C();
    tg.C();
}

打包后的index.js，界面直接使用的文件

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
function common(){
    return "common";
}
module.exports = common;

},{}],2:[function(require,module,exports){
function A(){
    //require函数的返回值：define中的module.exports
    var common =  require('./common/common.js');
    console.log("A from damu&"+ common());
}

function B(){
    var common =  require('./common/common.js');
    console.log("B from damu&"+ common());
}

function C(){
    var common =  require('./common/common.js');
    console.log("C from damu&"+ common());
}

exports.A =A;
exports.B =B;
exports.C =C



},{"./common/common.js":1}],3:[function(require,module,exports){
function A(){
    //require函数的返回值：define中的module.exports
    var common =  require('./common/common.js');
    console.log("A from hsp&"+ common());
}

function B(){
    var common =  require('./common/common.js');
    console.log("B from hsp&"+ common());
}

function C(){
    var common =  require('./common/common.js');
    console.log("C from hsp&"+ common());
}

module.exports = {
    A:A,
    B:B,
    C:C
}


},{"./common/common.js":1}],4:[function(require,module,exports){
window.onload=function(){
    var damu = require("./damu.js");
    var hsp = require("./hsp.js");
    var tg = require("./tg.js");

    damu.C();
    hsp.C();
    tg.C();
}

},{"./damu.js":2,"./hsp.js":3,"./tg.js":5}],5:[function(require,module,exports){
function A(){
    //require函数的返回值：define中的module.exports
    var common =  require('./common/common.js');
    console.log("A from tg&"+ common());
}

function B(){
    var common =  require('./common/common.js');
    console.log("B from tg&"+ common());
}

function C(){
    var common =  require('./common/common.js');
    console.log("C from tg&"+ common());
}

module.exports = {
    A:A,
    B:B,
    C:C
}


},{"./common/common.js":1}]},{},[4]);

四、使用细节和注意事项

1、路径问题
在CommonJS./ :代表当前路径。

2、使用bat文件时打包文件时，文件名不能为browserify

browserify ./tai.js  -o ./dist/tai.js

否则与命令browserify 重复，执行错误。