在模块化开发过程中经常遇到模块的导出导入。涉及到 require 、export、module.exports、exports这些关键词。但是其中究竟有什么区别。自己还真的经常弄糊涂。
有CommonJS模块标准 也就是 require module.exports 的使用，常用于node服务端中，也有使用在浏览器端通过 browerify 进行打包处理
有AMD模块标准和CMD模块标准，这2个相对繁琐
常用的ES6模块标准 通过 import {} form './文件名' 导入，export导出的方式，
ES6标准发布后，
module成为标准，标准使用是以export指令导出接口，以import引入模块。
1.分别 暴露module1.js
注意 是export 不是exports 一共有3种暴露方式
export function foo(){ console.log('分别暴露foo')}
export function foo2(){ console.log('分别暴露foo2')}
export function foo3(){ console.log('分别暴露foo3')}
2.统一暴露
let app = function(){ console.log('统一暴露')}
let app2= function(){ console.log('统一暴露')}
export {app ,app2};
3.默认暴露
export default {
msg:'默认暴露',
foo4(){ console.log(this.msgs) }
}
在主模块 main.js中调用这3个模块
import {foo,foo2} from "./modules1.js"
import {app,app2} from "./modules2.js"
import modules3 from "./modules3.js" //这里的modules3 就是一个对象
console.log(foo,foo2)
console.log(app,app2 )
modules3()
这是部分代码，如果想在web浏览器中运行还的经过2次编译
看懂原理即可，如果想运行看下面的步骤
1. 安装babel-cli babel-preset-es2015 和browserify
npm install babel-cli browerify -g
npm install babel-preset-es2015 --save-dev
2. 定义 .babelrc 文件 rc 就是用行时控制文件 run control
文件名 .babelrc 不加js后缀
+ 放的es2015 就是让它转换成es6
+ 放的是JSX 就是让它转为 JSX
```
{
"presets":["es2015"]
}
```
3. 编码
4. 编译
*使用babel 讲ES6编译为ES5代码（包含CommonJS语法）
*babel js/src -d js/lib
*使用 browserify js/lib/main.js -o js/dist/bundle.js
5. 每次改完代码后都得重新编译2次 babel 和 browserfify
心法：
1.暴露接口时，一般如果要对module.exports重新赋值，改变引用，就这样写
const a = 1
const b = 2
module.export {
a,b
}
2.module.exports.a = 1
module.exports.b = 2
3.exports.a= 1
exports.b = 2
4.module.exports.a = 1
exports.b = 2
这几种都是没问题的
