CommonJS - Browserify

1️⃣ CommonJS

唯一一个双端支持的语法：浏览器端和服务端
https://javascript.ruanyifeng.com/nodejs/module.html#toc1

1️⃣ CommonJS 模块的特点

所有代码都运行在模块作用域，不会污染全局作用域。
模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
模块加载的顺序，按照其在代码中出现的顺序。

1️⃣ module.exports 与 exports

module.exports 属性表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取 module.exports 变量。

// 语法：为一次性暴露
module.exports = function () {
    console.log('1');
}

为了方便，Node为每个模块提供一个exports变量，指向 module.exports 这等同在每个模块头部，有一行这样的命令。

var exports = module.exports;
// 语法：为分别暴露
exports.hello = function() {
  return 'hello';
};

注意：module.exports 与 exports 不可混用，一起使用时 module.exports 会覆盖 exports

1️⃣ require命令

2️⃣ 基本用法 - 模块之间可以互相引入依赖

require 命令的基本功能是，读入并执行一个 JavaScript 文件，然后返回该模块的 exports 对象。如果没有发现指定模块，会报错。

// 语法：
     引入模块：
   var module = require('./module.js');
// 当引入第三方库的时候，如果在本文件夹内没有找到node_modules，找外层文件夹，直到根目录
// 如果模块输出的是一个函数，那就不能定义在exports对象上面，而要定义在module.exports变量上面。
module.exports = function () {
  console.log("hello world")
}
require('./example2.js')()

2️⃣ 加载规则

require 命令用于加载文件，后缀名默认为 .js。

var foo = require('foo');
//  等同于
var foo = require('foo.js');

根据参数的不同格式，require命令去不同路径寻找模块文件。
如果参数字符串以“/”开头，则表示加载的是一个位于绝对路径的模块文件。比如，require(‘/home/marco/foo.js’)将加载/home/marco/foo.js。
如果参数字符串以“./”开头，则表示加载的是一个位于相对路径（跟当前执行脚本的位置相比）的模块文件。比如，require(‘./circle’)将加载当前脚本同一目录的circle.js。
如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块（位于Node的系统安装目录中），或者一个位于各级node_modules目录的已安装模块（全局安装或局部安装）。
举例来说，脚本/home/user/projects/foo.js执行了require(‘bar.js’)命令，Node会依次搜索以下文件。

/usr/local/lib/node/bar.js
/home/user/projects/node_modules/bar.js
/home/user/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js

这样设计的目的是，使得不同的模块可以将所依赖的模块本地化。
如果参数字符串不以“./“或”/“开头，而且是一个路径，比如require('example-module/path/to/file')，则将先找到example-module的位置，然后再以它为参数，找到后续路径。
如果指定的模块文件没有发现，Node会尝试为文件名添加.js、.json、.node后，再去搜索。.js件会以文本格式的JavaScript脚本文件解析，.json文件会以JSON格式的文本文件解析，.node文件会以编译后的二进制文件解析。
如果想得到require命令加载的确切文件名，使用require.resolve()方法。

2️⃣ 目录的加载规则

通常，我们会把相关的文件会放在一个目录里面，便于组织。这时，最好为该目录设置一个入口文件，让require方法可以通过这个入口文件，加载整个目录。
在目录中放置一个package.json文件，并且将入口文件写入main字段。下面是一个例子。

// package.json
{ 
  "name" : "some-library",
  "main" : "./lib/some-library.js" 
}

require发现参数字符串指向一个目录以后，会自动查看该目录的package.json文件，然后加载main字段指定的入口文件。如果package.json文件没有main字段，或者根本就没有package.json文件，则会加载该目录下的index.js文件或index.node文件。

1️⃣ 浏览器运行 CommonJS

链接：http://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html
下载browserify(用于把CommonJS的模块化语法，翻译成浏览器认识的语法，是一个“翻译官”)

  1. 全局安装browserify，命令: `npm install browserify -g`

备注：若此步骤报错，请使用管理员身份打开webstorm，再次执行即可；或使用管理员身份打开cmd执行。
执行处理命令

  1. 第一步，cd到指定文件夹即：app.js所在的文件夹
  2. 第二步，输入命令`browserify js/src/app.js -o js/dist/bundle.js`
  3. 解释：browserify 编译 CommonJS 文件 到 浏览器认识的文件

使用引入:

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