本文已参与「新人创作礼」活动，一起开启掘金创作之路。

在正式开始学习模块化前，我们先安装一下需要的环境，[Node.js (http://nodejs.cn)直接下载安装即可

前面我们知道了模块化基本一些知识，也知道了一些常用的模块化规范，下面我就从 CommonJS 开始

• CommonJS
• ES6
• AMD
• CMD

1. CommonJS

首先创建一个项目，以下是项目的结构

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

• 下载第三方模块 npm install uniq --save

• module1.js

module.exports = {
  fun() {
    console.log('module1.js moudle1 fun()')
  }
}

• module2.js

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

• module3.js

exports.fun = function () {
  console.log('module3.js fun()')
}

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

• app.js

let module1 = require('./modules/module1')
let module2 = require('./modules/module2')
let module3 = require('./modules/module3')
let uniq = require('uniq')
let fs = require('fs')

//使用模块
module1.fun()
module2()
module3.fun()
module3.bar()

console.log(uniq([1, 3, 1, 4, 3]))

fs.readFile('app.js', function (error, data) {
  console.log(data.toString())
})

• 通过node来运行app.js node app.js

在上面使用了很多ES6的内容，很多低版本的浏览器可能还不认识ES6，所以我们得使用工具，把ES6转成浏览器认识的语法

安装babel-cli, babel-preset-es2015

npm install babel-cli -g npm install babel-preset-es2015 --save-dev

• 创建 .babelrc文件

{
 "presets": ["es2015"]
}

运行命令，使用babel来将ES6转成ES5 babel js/src -d js/lib

同时也需要多个js打包成一个js，这里就是需要 browserify 来解决

2. 下载browserify

• 全局: npm install browserify -g
  • 局部: npm install browserify --save-dev
• 打包: `browserify js/src/app.js -o js/dist/bundle.js``

2. ES6

• module1.js

module.exports = {
  fun() {
    console.log('module1.js moudle1 fun()')
  }
}

• module2.js

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

• module3.js

exports.fun = function () {
  console.log('module3.js fun()')
}

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

• app.js

let module1 = require('./modules/module1')
let module2 = require('./modules/module2')
let module3 = require('./modules/module3')
let uniq = require('uniq')
let fs = require('fs')

//使用模块
module1.fun()
module2()
module3.fun()
module3.bar()

console.log(uniq([1, 3, 1, 4, 3]))

fs.readFile('app.js', function (error, data) {
  console.log(data.toString())
})

• 编译

  • 使用Babel将ES6编译为ES5代码(但包含CommonJS语法) : babel js/src -d js/lib
  • 使用Browserify编译js : browserify js/lib/app.js -o js/lib/bundle.js

• 页面中引入测试

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

• 引入第三方模块(jQuery)

npm install jquery@3 --save

在app.js中使用jquery，查看运行结果