JS模块化

---

一、什么是模块化？

将一个复杂的程序依据一定的规则，封装成几个文件，并且文件的内部数据/实现是私有的，只是向外暴露一些接口与外部其他模块通信

模块的进化史

模块化的好处

避免命名冲突；更好的分离代码，按需加载；更高的复用性；高可维护性

二、模块化规范

1.CommonJS

说明:每个文件都可以当作一个模块，并且因为浏览器并不认识commonJs语法，模块需要提前编译打包处理

暴露模块

 // exports = module.exports 
 // exports只是module.exports 的简写形式
 var xxx=function (){}
 var a=1000
 //暴露方式
 module.exports={
    xxx, //如果不写属性名，默认属性为xxx
    a //如果不写属性名，默认属性为a
 } 
 exports.zzz=function（）{}
 module.exports.qqq={}

引入模块

let modules=require('暴露模块的文件路径')

实现：
安装Browserify代码包，npm install -g browserify

将CommonJS语法编译成浏览器能够识别的语法

browserify entry.js -o output.js

2.ES6

说明：依赖模块需要编译打包处理

暴露模块

 export {xxx,yyy,ccc} 导出多个对象 //文件名 more.js
 export default iii 导出默认对象 iii //文件名 less.js

引入模块

 import {xxx,yyy,ccc} from 'more.js' //ES6结构赋值引入模块
 import iii from 'less.js' 

实现：安装babel-cli, babel-preset-es2015和browserify

 npm install babel-cli browserify -g 
 
 npm install babel-preset-es2015 --save-dev * preset 预设(将es6转换成es5的所有插件打包)

定义.babelrc文件

	{
    "presets": ["es2015"]
  }

Babel将ES6代码转化为CommonJs代码

babel js/src -d js/lib （-d 以文件夹为单位进行转化）

Browserify再将commonJs语法转化为浏览器能够识别的代码

browserify entry.js -o output.js （-o 转化当前文件）

• 两者之间的详细区别 https://www.cnblogs.com/unclekeith/archive/2017/10/17/7679503.html
• ES6动态只读引用：https://www.cnblogs.com/zhansu/p/6256423.html