module.exports和exposts和export以及import和require的区别

建议看这篇文章的同学具有js基础，对es6了解，熟悉引用数据类型的存储，过程中我并不会说过多语言去描述这些方法，因为说再多语言解释不如一串代码更容易让同学理解，同学们在学习过程中一定要动手敲代码，将每一步打印出来更便于理解学习，有什么我没描述清楚或者有不明白的地方可以告诉我哦~

export和import

这两个方法是es6新增的模块化语法，学习过vue的同学一定不少使用这两个方法

1.export

这个方法是js中模块用来对外暴露方法或数据的，他有三种对外暴露的方式，分别是统一暴露，分别暴露以及默认暴露，当然引入的方式也不是只有一种，下面给大家一一介绍

下面是使用统一暴露

let name = "张三";
let age = 18;
let height = 180;
let weight = 80;
export { name, age, height, weight };
复制代码

下面是分别暴露

export let name = "张三";
export let age = 18;
export let say = function () {
  console.log("hello");
};
复制代码

下面是默认暴露，一个模块中只有一个export default，即使你写多个也只会有一个export default会暴露出去，写多了还可能会导致webpack编译不通过

export default {
  name: "张三",
  age: 18,
  say: function () {
    console.log("我是" + this.name + "，今年" + this.age + "岁");
  },
};
复制代码

2.import 还用export向外暴露其实暴露出来就是一个对象，我们使用import导入，导入的也是这个对象，既然是对象name就可以使用es6的对象解构，下面看第一种导入的方式

通用导入方式，该方式导入的mudule这个对象，模块暴露出来的数据都在这个对象内，如果暴露使用的是默认暴露(export default)这个语法，那我们还需要.default才能拿到模块对外暴露的数据

import * as demo from "目标模块路径";
console.log(demo);//module对象，其内保存模块对外暴露的数据
//如果使用export default对外暴露数据时
console.log(demo.default)//其内保存模块对外暴露的数据
复制代码

es对象解构方式导入，如下面代码，即使目标模块中对外暴露的不止name这一个属性，但是我们导入时只解构出name这个属性，其余的数据并不会解构出来

import { name } from "目标模块路径";
console.log(name);
复制代码

默认导入方式当模块对外暴露使用的是export default默认暴露是就可以使用默认导入，使用统一暴露和分别暴露是不能使用默认导入这种方式的

import demo from "./demo.js";
console.log(demo);
复制代码

module.exports、exposts、require

如果是了解过NodeJS的同行，对这三个方法一定不会陌生，NodeJS的模块就是通过这三个方法导入和导出的，module.exports和exports是对外共享模块中的方法和数据，require是导入模块对外暴露的方法和数据

module.exports

向外共享模块中的方法，module.exports实际上就是一个空对象，向外共享的也是这个空对象，说再多不如直接上代码更能让大家理解

下面这串代码向外共享的是name是李四的那个对象，name是张三的那个对象并不会对外共享

module.exports = {
  name: "张三",
  sayName: () => {
    console.log("我是张三");
  },
};
module.exports = {
  name: "李四",
  sayName: () => {
    console.log("我是李四");
  },
};
复制代码

下面这串代码我们只是想exports这个对象内添加属性和方法，所以都可以暴露出去

module.exports.name = "张三";
module.exports.nickName = "李四";
module.exports.sayName = () => {
  console.log("我是张三");
};
module.exports.sayNickName = () => {
  console.log("我是李四");
};
复制代码

2.exports

这个方法和module.exports使用方式一致，是为了简化module.exports书写而存在的，如果模块中同时使用module.exports和exports向外共享数据，会共享module.exports指向的那个对象，不会共享exports指向那个对象，还是依旧看代码

下面这串代码，向外共享的是name为张三的那个对象，name为李四的那个对象并不会对外共享，外界也无法使用

module.exports = {
  name: "张三",
  sayName: () => {
    console.log("我是张三");
  },
};
exports = {
  name: "李四",
  sayName: () => {
    console.log("我是李四");
  },
};
复制代码

3.require

这个方法是用来导入模块向外共享的数据的，当我们在模块中使用module.exports或exports，就可以在想要使用这个模块的js文件中使用该方法导入，这个方法的参数就是模块所在的路径，看代码

//文件1
module.exports.sayName = () => {
  console.log("我是张三");
};
//文件2
const res = require("文件1的路径");
res.sayName()//我是张三
复制代码