繁体   English   中英

ES6 解构和模块导入

[英]ES6 Destructuring and Module imports

我的印象是这种语法:

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

最终结果与此相同:

import {Link} from 'react-router';

有人能解释一下有什么区别吗?

(我原本以为是React Router Bug 。)

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”的标准化命名导出)。

另请参阅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 捆绑的代码不同:

  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 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);

正如您在上面的 output 示例中看到的那样,其中存在冗余代码,当尝试通过UglifyJSTerser进行 uglify 时,这不利于优化。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM