前言

export/import: 只支持es6的导出引入
module.exports/exports: 只支持node的导出
require: 支持node和es6的引入

1、多个export导出

导出

export class Modulea {
  constructor(params) {
    console.log(params);
  }
}

export class Moduleb {
  constructor(params) {
    console.log(params);
  }
}

export class Modulec {
  constructor(params) {
    console.log(params);
  }
}

第一种引入方式

import { Modulea, Moduleb, Modulec } from "@/assets/js/export.js";

new Modulea("模块A");
new Moduleb("模块B");
new Modulec("模块C");

第二种引入方式

import * as exporta from "@/assets/js/export.js";

new exporta.Modulea("模块A");
new exporta.Moduleb("模块B");
new exporta.Modulec("模块C");

2、export default导出

导出

class Moduleb {
  constructor(params) {
    console.log(params);
  }
}

class Modulec {
  constructor(params) {
    console.log(params);
  }
}

export default class Modulea {
  constructor(params) {
    console.log(params);
  }

  newB(params) {
    new Moduleb(params);
  }

  newC(params) {
    new Modulec(params)
  }
}

引入

import ExportDefault from "@/assets/js/export.js";

let exportDefault = new ExportDefault("模块A");
exportDefault.newB("模块B");
exportDefault.newC("模块C");

3、单个export导出一

不使用default，引入方式同第一种。

导出

class Moduleb {
  constructor(params) {
    console.log(params);
  }
}

class Modulec {
  constructor(params) {
    console.log(params);
  }
}

class Modulea {
  constructor(params) {
    console.log(params);
  }
  
  newB(params) {
    new Moduleb(params);
  }
  
  newC(params) {
    new Modulec(params)
  }
}

export {
  Modulea,
  Moduleb,
  Modulec
}

4、单个export导出二

使用default。

导出

class Moduleb {
  constructor(params) {
    console.log(params);
  }
}

class Modulec {
  constructor(params) {
    console.log(params);
  }
}

class Modulea {
  constructor(params) {
    console.log(params);
  }

  newB(params) {
    new Moduleb(params);
  }

  newC(params) {
    new Modulec(params)
  }
}

export default {
  Modulea,
  Moduleb,
  Modulec
}

引入

import ExportDefault from "@/assets/js/export.js";

new ExportDefault.Modulea("模块A");
new ExportDefault.Moduleb("模块B");
new ExportDefault.Modulec("模块C");

5、module.exports导出

导出

class Moduleb {
  constructor(params) {
    console.log(params);
  }
}

class Modulec {
  constructor(params) {
    console.log(params);
  }
}

class Modulea {
  constructor(params) {
    console.log(params);
  }

  newB(params) {
    new Moduleb(params);
  }

  newC(params) {
    new Modulec(params)
  }
}

module.exports = {
  Modulea,
  Moduleb,
  Modulec
}

引入

let ExportDefault = require("@/assets/js/export.js");

new ExportDefault.Modulea("模块A");
new ExportDefault.Moduleb("模块B");
new ExportDefault.Modulec("模块C");

6、exports第一种导出

导出

class Moduleb {
  constructor(params) {
    console.log(params);
  }
}

class Modulec {
  constructor(params) {
    console.log(params);
  }
}

class Modulea {
  constructor(params) {
    console.log(params);
  }

  newB(params) {
    new Moduleb(params);
  }

  newC(params) {
    new Modulec(params)
  }
}

exports.ES = {
  Modulea,
  Moduleb,
  Modulec
}

引入

let ExportDefault = require("@/assets/js/export.js");

new ExportDefault.ES.Modulea("模块A");
new ExportDefault.ES.Moduleb("模块B");
new ExportDefault.ES.Modulec("模块C");

7、exports第二种导出

导出

class Moduleb {
  constructor(params) {
    console.log(params);
  }
}

class Modulec {
  constructor(params) {
    console.log(params);
  }
}

class Modulea {
  constructor(params) {
    console.log(params);
  }

  newB(params) {
    new Moduleb(params);
  }

  newC(params) {
    new Modulec(params)
  }
}

exports.Modulea = Modulea;
exports.Moduleb = Moduleb;
exports.Modulec = Modulec;

引入

let ExportDefault = require("@/assets/js/export.js");

new ExportDefault.Modulea("模块A");
new ExportDefault.Moduleb("模块B");
new ExportDefault.Modulec("模块C");

8、混合导出

导出

function add(a, b) {
  return a + b;
}

function dist(a, b) {
  return a - b;
}

export { dist };

export default add;

引入

import add, { dist } from "@/assets/js/export.js";

console.log(add(1, 5));
console.log(dist(7, 1));