JS模块化（一）：CommonJS

简介

CommonJS规范规定，每个模块内部， module 变量代表当前模块。这个变量是一个对象，它的 exports 属性（即 module.exports ）是对外的接口。加载某个模块，其实是加载该模块的 module.exports 属性。

使用 require(xxx) 方法，可以加载需要的内置模块、用户自定义模块、第三方模块进行使用。
核心模块和第三方模块：xxx 为模块名
自定义模块：xxx 为模块文件路径

let name = 'now';
let age = 18;
 
let fun = () => {
    console.log('into fun');
    name = 'change'
}
module.exports = {
    name,
    fun
}

var module1 = require('./util/index.js')
var { name, fun } = require('./util/index.js')//解构赋值

module

module 中的属性：

• module.exports 表示模块对外输出的值。
• module.id 模块的识别符，通常是带有绝对路径的模块文件名。
• module.filename 模块的文件名，带有绝对路径。
• module.loaded 返回一个布尔值，表示模块是否已经完成加载。
• module.parent 返回一个module对象，表示调用该模块的模块，如果改该模块没有被引用，那么 parent 就是 null。
• module.children 返回一个module数组，表示该模块要用到的其他模块。
• module.paths 这个用于 require 查找该文件的位置。

require

根据参数的不同格式，require命令去不同路径寻找模块文件:

• 如果参数字符串以“/”开头，则表示加载的是一个位于绝对路径的模块文件。比如，require(’/home/marco/foo.js’)将加载/home/marco/foo.js。
• 如果参数字符串以“./”开头，则表示加载的是一个位于相对路径（跟当前执行脚本的位置相比）的模块文件。比如，require(’./circle’)将加载当前脚本同一目录的circle.js。
• 如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块（位于Node的系统安装目录中），或者一个位于各级node_modules目录的已安装模块（全局安装或局部安装）。
• 如果参数字符串不以“./“或”/“开头，而且是一个路径，比如require(‘example-module/path/to/file’)，则将先找到example-module的位置，然后再以它为参数，找到后续路径。
• 如果指定的模块文件没有发现，Node会尝试为文件名添加 .js、.json、.node后，再去搜索。.js件会以文本格式的JavaScript脚本文件解析，.json文件会以JSON格式的文本文件解析，.node文件会以编译后的二进制文件解析。所以文件名的后缀可以省略。
• 如果想得到require命令加载的确切文件名，使用require.resolve()方法。

module.exports 和 exports

加载某个模块，其实是加载该模块的 module.exports 属性。

我们还可以导出 exports 直接使用，但需要注意一点，exports 是已经定义的常量，在导出的时候不能在给它定义

let exports = module.exports // 错误 #region exports  Identifier 'exports' has already been declared
exports = module.exports; // 正确的

使用 exports 我们可以这么导出对象，但需要注意一点，在导出对象前不能修改 exports 的指向，若修改 exports 就与 module.exports 不是一个东西了，当然你可以在导出对象后随意修改，这时候就不会影响导出。

exports = module.exports
// exports = ()=>{} 不能修改
exports.fun = () => {
    console.log('into fun');
    name = 'change'
}
exports.name = 'now';
// exports = ()=>{} 随你改

隔离性

CommonJS 规范是在运行时加载的，在运行时导出对象，导出的对象与原本模块中的对象是隔离的，简单的说就是克隆了一份。

在浏览器中使用 CommonJS

因为浏览器中缺少 module exports require global 这个四个变量，所以在浏览器中没法直接使用 CommonJS 规范，非要使用就需要做个转换，使用 browserify，它是常用的 CommonJS 转换工具，可以搭配 gulp webpack 一起使用。

• 打包命令 browserify app.js -o build.js
  • app.js 为入口文件
  • build.js 为输出文件，页面引用JS文件时应用该文件