ES6 解构和模块导入

Posted 2023-02-22

【中文标题】ES6 解构和模块导入

【英文标题】：ES6 Destructuring and Module imports

【发布时间】：2016-02-05 02:45:57

【问题描述】：

我的印象是这种语法：

import Router from 'react-router';
var Link = Router;

最终结果与此相同：

import Link from 'react-router';

谁能解释一下有什么区别？

（我原本以为是React Router Bug。）

【问题讨论】：

不幸的是，它们具有相同的速记语法，但是如果您检查它们的长形式，它们显然是不同的：var "Link": Link = Router; vs import Link as Link from '…';

【参考方案1】：

import Link from 'react-router';

从react-router 导入一个命名的导出，例如

export const Link = 42;

---

import Router from 'react-router';
const Link = Router;

从默认导出中取出属性Link，假设它是一个对象，例如

export default 
  Link: 42
;

（默认导出实际上只是一个名为“default”的标准化命名导出）。

另见export on MDN。

完整示例：

// react-router.js
export const Link = 42;
export default 
  Link: 21,
;


// something.js
import Link from './react-router';
import Router from './react-router';
const Link: Link2 = Router;

console.log(Link); // 42
console.log(Link2); // 21

---

对于 Babel 5 及以下版本，我相信它们可以互换，因为 ES6 模块已被转换为 CommonJS。但就语言而言，这是两种不同的结构。

【讨论】：

很好的答案。导入命名导出的语法很容易与对象的解构语法混淆。

Babel 6 确实不 使两者可以互换。当心！

【参考方案2】：

为此：

import purple, grey from 'themeColors';

无需为每个符号重复export const，只需：

export const
  purple = '#BADA55',
  grey = '#l0l',
  gray = grey,
  default = 'this line actually causes an error';