ES6解构和模块导入

我的印象是这样的句法:

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

最终结果与此相同:

import {Link} from 'react-router';

有人能解释一下有什么不同吗？

(我原以为是 反应路由器错误。)

55921 次浏览
小开
最佳答案 
import {Link} from 'react-router';

从 react-router导入一个 名为 export，例如

export const Link = 42;

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

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

export default {
Link: 42
};

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

参见 MDN 上的 export。

完整的例子:

// 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。但就语言而言，这是两种不同的结构。

小开

要做到这一点:

import {purple, grey} from 'themeColors';

对于每个符号 ，不需要重复 export const，只需要做:

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

除了不同的出口，它也可能导致 在使用两种不同的方法销毁 ESM 模块时，WebPack 会提供不同的捆绑代码:

// react-router
export function Link(str) { /* ... */ }

  1. 在 import声明中销毁:

    import {Link} from 'react-router';


Link('1');
Link('2');

    // WebPack output
var util_mobileValidator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
(0,util_mobileValidator__WEBPACK_IMPORTED_MODULE_3__.Link)('1');
(0,util_mobileValidator__WEBPACK_IMPORTED_MODULE_3__.Link)('2');

  2. 使用解构语法:

    import * as Router from 'react-router';
const {Link} = Router;


Link('1');
Link('2');

    // WebPack output:
var util_mobileValidator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
const {Link} = util_mobileValidator__WEBPACK_IMPORTED_MODULE_3__;
Link(1);
Link(2);

正如您可以在上面的输出示例中看到的，其中存在冗余代码，当试图通过 UglifyJS或 Terser进行丑化时，这对于优化是不利的。


提交答案