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<quality<1）越大压缩越快 图片质量跨度相对低 越小则相反
        size: 200, // 必选(justConversion存在可不选) 压缩后图片大小 单位k
        requestType: 'base64', // 必选 传入文件类别 base64 | file | blob
        responseType: 'base64', // 必选 返回文件类别 base64 | file | blob
        imgType: 'image/jpeg', // 可选 (默认原生文件类型) 返回文件对象的文件类型
        fileName: 'ysl', // 如果responseType的类型为file和非justConversion 此选项可选 返回文件对象的文件名
        callback: (result) => {
          if (result === null) {
            alert('图片处理异常')
            return
          }
          this.params.mainImagePath = result
        } // 回调函数 返回处理后文件 如果为null 表示文件处理不了(原因 少了参数 参数不合法))
      })

require

用于引入模块、 JSON、或本地文件。 可以从 node_modules 引入模块。 可以使用相对路径（例如 ./、 ./foo、 ./bar/baz、 …/foo）引入本地模块或 JSON 文件，路径会根据 __dirname 定义的目录名或当前工作目录进行处理
例子1-引入本地模块-export导出

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

// import-test.vue
const importTest = require('./importTest')
importTest.fn()
console.log(importTest.name)

例子2-引入本地模块-export default导出

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

// import-test.vue
const importTest = require('./importTest')
importTest.default.fn()
console.log(importTest.default.name)

例子3-获取json

// importTest.json
{
  "name": "零零三"
}


// import-test.vue
const jsonData = require('./importTest.json')
console.log(jsonData)//{name: "零零三"}

例子3-引入node_modules模块 或 Node.js 内置模块

// 下载图片压缩插件
npm i ls-compressimage --save
// 插件内部
const compressFile = function(){}
module.exports=compressFile


// import-test.vue
const compressImage = require('ls-compressimage')
console.log(compressImage)//方法体

import与require的区别

require是运行时调用，所以可以随处引入

import是编译时调用，必须放在文件开头引入，目前部分浏览器不支持，需要用babel把es6转成es5再执行

import使用
上面已经举例，现在说个特别的例子

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

// import-test.vue
import './importTest'
// 执行了 console.log(1,2,3)
fn()//错误
console.log(name)//错误

不能使用未导出的变量、但是里面字面量代码依旧会正常执行 require结果一样