ES6 import/export用法 模块化的认识

在模块化开发过程中经常遇到模块的导出导入。涉及到 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

这几种都是没问题的