js中的export、import、export default等导入导出全解

前端因为规范不同，所以不同的环境会有不同的导入导出方法，因为经常弄混所以特地记一下方便以后查阅记忆，本笔记都是自己总结或查阅资料得出，如有错误请帮忙指出。

因为前端的导入导出主要分为commonjs和ES6modules两种标准，其中commonjs主要用于node环境，而ES6modules主要用于浏览器环境，但是ES6modules是兼容commonjs标准的，所以这就很容易让人弄混，本文也将从两个标准来进行讲解

一、commonJS

学过node的我相信对commonJS规范一定不陌生，在这里不多赘述其他仅讲解导入导出。commonJS的导入导出分别是require和module.exports。

1.require

require是一个全局性方法，它的作用就是用于加载模块用的，使用该方法后会有个返回值，所以需要定义一个变量来接受，如下所示：

const { ipcRenderer } = require("electron");

2.module.exports

在commonJS规范中每个文件就是一个模块，每个模块内部，有一个变量module代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

let a = 123;
let b = [1,2,3];
module.exports.a = a;
module.exports.b = b;

在上面的例子中我就将a和b都挂载到了module.exports这个对象上，这两个变量将会随着module.exports这个对象一起导出。假设我上面的例子是文件demo.js文件中的语句

const demoExportObj = require('./demo.js');

console.log(demoExportObj.a); // 123
console.log(demoExportObj.b); // [1,2,3]

那么demoExportObj这个对象其实就是demo.js文件中的module.exports对象，因为a和b都挂载到了module.exports这个对象上，所以demoExportObj这个对象就可以拿到a和b的值。

3.exports

exports这玩意原本的目的是为了方便用户使用的，它的作用就是接受module.exports这个对象。其实相当于下面这段代码

const exports = module.exports;

反正我倒是没觉得有多方便，而且因为这个变量常常会和export弄混，某种意义来上说实属鸡肋，但是你用熟练了还是比较好用的。这里需要注意一点export本质上就是就是一个变量接受了module.exports这个对象，实际的导出值还是module.exports。
所以下面这种写法是不被允许的，这个时候本来a被挂载到了exports上，而因为浅拷贝的关系这个时候a就相当于挂载到了module.exports上。而这个时候重新对module.exports赋值就会让实际导出的值为当前这个值，反倒是之前的exports因为指向问题而无法导出。

let a = 123;
let b = [1,2,3];
exports.a = a;
module.exports = b;

所以一定一定要注意这两个的关系，切记这两者的关系不要弄混。

二、ES6modules

ES6modules的导入导出依靠的是import和export,注意这里的是export而不是commonJS中的exports，注意区分。

1.export和export default

export可以导出一个变量也可以导出一个方法文件也是不在话下，不过export与module.exports之间是有很大的区别的，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。export有两种模块导出方式：命名式导出（名称导出）和默认导出（定义式导出），命名式导出每个模块可以多个，而默认导出每个模块仅一个。

• 命名式导出
  模块可以通过export前缀关键词声明导出对象，导出对象可以是多个。这些导出对象用名称进行区分，称之为命名式导出,同时导出时还可以使用as设置一个别名。例如以下例子所示：

// 写法一
export const a = 1;
// 写法二
const b = 2;
export {b};
// 写法三
export let c = ()=>{};
// 写法四
let d = ()=>{};
export {d};
// 写法五
let e = ()=>{};
export {e as fun}; //变量在前，名称在后！！！

• 默认导出
  默认导出使用的是export default,它表示的是默认导出，使用时不需要使用花括号来进行包裹或者说不需要使用比那里，在一个文件或模块中，export、import可以有多个，export default仅有一个。

// 可为匿名函数
export default () => {}
// 也可非匿名
let b = function () {
  console.log(123);
}
export default b

上面的非匿名函数默认导出切记不能写成下面这种形式

export default let c = () => {}

这是因为默认导出不支持使用关键字来定义一个变量，但是可以使用function来定义一个函数。

2.import

import也是一个命令，它和require方法最大的区别就是：import命令在编译时就会将需要导入的文件或者变量函数等导进来，而require是在运行时加载的，有点类似于懒加载。之所以先讲导出再讲导入是因为import与export息息相关，export和export default导出的值import的接收方式是不一样的

• 命名式导出
  使用命令是导出，那么你必须使用导出时所对应好的变量名来接收否则报错，同时接收的值必须是在大括号内，因为只有这样才是解构，否则也会报错。例如：

// 导出  文件a.js
export const a = 1;
const b = 2;
export {b};
export let c = ()=>{};

// 导入 文件b.js
import { a } from "./a.js";
import b from "./a.js"; //错误写法，运行时会提示没有使用export default导出
import { c as fun } from "./a.js"; //导出时也可以使用as定义别名

console.log(a, b);
console.log(fun);

• 默认导出
  导入默认导出的值时，最大的特点就是不用添加大括号，同时定义的变量名也不用一一对应。

export default () => { }

import a from "./a.js";
console.log(a);

3.import()

注意一下这里的import()是一个方法，它和import的区别就是import是静态加载import()是动态加载，import命令能够接受什么参数，import()函数就能接受什么参数。我想大家应该在vue的router里面用过或者看到过这样的写法：

{
      path: "/Order",
      name: "Order",
      component: () => import("@/views/Order.vue"),
    }

这种就是利用了import()方法动态加载的特性完成了路由的懒加载。

4.* as xxx from

这种写法一般是为了将多个导出对象放在一个对象中方便使用，一般有一下几种用法

1. 第一种

// a.js
export function a(){
 console.log(123)
}
export function b(){
 console.log(456)
}

//b.js
import * as fnc from './a.js'
fnc .a()  // 123
fnc .b()  // 456

2. 第二种

// a.js
let a = 1;
let b = 2;
let c = 3;
let d = 4;
export { a, b, c, d }

//b.js
import * as info from "./a.js";
console.log(info.a);  // 1

3. 第三种

// a.js
let a = 1;
let b = 2;
let c = 3;
let d = 4;
export default { a, b, c, d }

//b.js
import * as info from "./a.js";
console.log(info.default.a); // 1

到这里前端的导入导出就全部讲完了，因本人水平有限，如有遗漏或错误欢迎指出。若本篇文章对诸君略有价值我将不胜荣幸。