持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情
1.为什么要模块化
降低复杂度；解耦；部署优化
- 2.好处
避免命名冲突；更好的分离按需加载；更高复用性；高可维护性
3.模块化分类
commonJs：
概念：每一个js文件都可当作一个模块；在服务端模块的加载是运行时同步加载的；在浏览器端模块需要提前编译打包处理
基本语法：
暴露模块方式
- module.exports = value
- exports.XXX = value
本质：暴露的是exports
引入模块：require(XXX) 注：第三方资源库：XXX为第三方模块名，自定义模块：XXX为模块文件路径
browserify(客户端打包文件第三方库): browserify 项目根目录开始需要打包文件路径 -o 项目根目录开始需要输出的文件路径
CMD: （阿里产品出售国外）
概念：专门用于浏览器端，模块的加载是异步的,模块在使用时才加载
基本语法：
- 定义没有依赖的模块
define(function(require,exports,module){
exports.XXX = value
或者module.exports = value
})
- 定义有依赖的模块
define(function(require,exports,module){
// 引入依赖模块(同步)
var module2 = require('./module2')
// 引入依赖模块(异步)
require.async('./module3',function(m3){
})
暴露模块: exports.XXX = value
})
- 引入模块：
define(function(require){
var module1 = require('./module1')
var module2 = require('./module2')
module1.show()
module2.show()
})
实现依赖第三方库（浏览器端）: Sea.js
AMD:（也叫requireJs）
概念：专门用于浏览器端，模块的加载是异步的
基本语法：
暴露模块方式
- 定义没有依赖的模块
define(function(){
return 模块
})
- 定义有依赖的模块
define(['module1','module2'],(m1,m2)=>{
return 模块
})
引入模块：require(['module1','module2'],(m1,m2)=>{
使用m1/m2
})
实现依赖第三方库（浏览器端）: Require.js
ES6：
依赖模块需要编译打包处理
1.语法：
导出模块 export
引入模块 import
- 实现依赖第三方库（浏览器端）: babel (一个javascript 编译器)
https:babeljs.cn/repl
ES6-Babel-Browserify使用教程
- 定义package.json文件
```
{
"name" : "es6-babel-browserify",
"version" : "1.0.0"
}
```
- 安装babel-cli, babel-preset-es2015和browserify
* npm install babel-cli browserify -g
* npm install babel-preset-es2015 --save-dev
* preset 预设(将es6转换成es5的所有插件打包)
- 定义.babelrc文件 --- run control (运行时的控制文件代表运行时会执行)
```
{
"presets": ["es2015"]
}
```
-
编码
-
编译
* 使用Babel将ES6编译为ES5代码(但包含CommonJS语法) : babel js/src -d js/lib
* 使用Browserify编译js : browserify js/lib/app.js -o js/lib/bundle.js
