ES6模块化详解

export

导出单个特性

定义几个，导出几个

使用 export 向外暴露的成员，只能使用 { } 的形式来接收;

export 可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 {} 中定义

使用 export 导出的成员，必须严格按照导出时候的名称，来使用 {} 按需接收；

使用 export 导出的成员，如果就想换个名称来接收，可以使用 as 来起别名；

例子1-基本用法每个导出

// importTest.js
export const name = "零三"
export const fn = function () {
  console.log('fn方法')
}

// import-test.vue
import {name,fn} from './importTest'
fn()
console.log(name)

例子2-基本用法一起导出

// importTest.js
const name = "零三"
const fn = function () {
  console.log('fn方法')
}
export {
  name,
  fn
}

// import-test.vue
import {name,fn} from './importTest'
fn()
console.log(name)

例子3-重命名再导出

// importTest.js
const name = "零三"
const fn = function () {
  console.log('fn方法')
}
export {
  name as userName,
  fn as func
}

// import-test.vue
import {userName,func} from './importTest'
func()
console.log(userName)

例子4-导出后重命名

// importTest.js
const name = "零三"
const fn = function () {
  console.log('fn方法')
}
export {
  name,
  fn
}

// import-test.vue
import {name as userName,fn as func} from './importTest'
func()
console.log(userName)

例子5-导出整合

// importTest.js
const name = "零三"
const fn = function () {
  console.log('fn方法')
}
export {
  name,
  fn
}

// import-test.vue
import * as importTest from './importTest'
importTest.fn()
console.log(importTest.name)

这就相当于是export default的操作了

export default

export default 向外暴露的成员，可以使用任意的变量来接收

在一个模块中，export default 只允许向外暴露1次

在一个模块中，可以同时使用 export default 和 export 向外暴露成员

例子1-基本用法

// importTest.js
const name = "零三"
const fn = function () {
  console.log('fn方法')
}
export default {
  name,
  fn
}

// import-test.vue
import importTest from './importTest'
importTest.fn()
console.log(importTest.name)

module.exports

exports = module.exports = {};

exports 是 module.exports 的一个引用

module.exports 初始值为一个空对象 {}，所以 exports 初始值也是 {}

require 引用模块后，返回的是 module.exports 而不是 exports!!!

exports.xxx 相当于在导出对象上挂属性，该属性对调用模块直接可见

exports = 相当于给 exports 对象重新赋值，调用模块不能访问 exports 对象及其属性

如果此模块是一个类，就应该直接赋值 module.exports，这样调用者就是一个类构造器，可以直接 new 实例。

使用举例 开发插件中会用到，如 ls-compressimage 插件 下载

npm i ls-compressimage

插件源码 使用它

import compressImage from 'ls-compressimage'
new compressImage({
        res: data.imgTime, // 必选 资源
        justConversion: true, // 可选 声明了此字段说明只进行格式转换 res requestType responseType callback必填，其他随意
        width: 500, // 可选(justConversion存在可不选) (默认图片自身宽度,建议自定义) 压缩后图片宽度
        // height: image.height,//可选 (默认 自定义图片宽度/原生图片宽度*原生图片高度) 压缩后图片高度
        quality: 0.2, // 可选 (默认0.3) 压缩层级质量（0