搞懂ES6的import export

引言

说来惭愧，这两个关键字几乎天天在写，但是自己写的模块export出去的对象，import居然拿不到，也是没谁了😟。痛定思痛，还是写篇博客加深一下记忆。
强烈推荐这篇文章讲的很透彻：external-modules

import的方式

import有以下几种使用方式：

import a from './module.js'

import {a} from './module.js'

import deflt, {a} from './module.js'

import * as a from './module.js'

export的几种方式

export const a = 1 //export后面是一个表达式

export function b(){} //export后面是一个函数声明语句

export default {c: 1} //export default

export {a} from './module.js'

export default 后面不能跟赋值表达式

import到底import了谁

其实就是个连线题。一个模块export的对象有两种，一种是通过export default导出的，另一种是通过export导出的。通过export default导出的可以用以下方式接收：

import defaultObj from 'module'

通过export导出的对象有以下两种接收方式：

// 导出
export const a = 1;


// 导入时

// 方式一
import * as md from 'module'

// md 拿到了所有用export方式导出的对象，这些对象都作为md的属性

md.a // 1

// 方式2，直接对*解构
import {a} from 'module'

搞两年前端了，这还没搞清楚，有点说不过去了。。

使用 as 重命名

有时候，模块里的变量名和本地的变量名可能会出现命名冲突，这时可以使用 as 关键字起个别名。可以给默认导出的default变量，导出的某一个模块变量，或者给*这个命名空间直接命名

import * as name from "module-name";
import defaultExport, * as name from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";

从上面的例子中可以看出，可以对*进行解构

参考

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import