[英]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 捆绑的代码不同:
在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');
使用解构语法:
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 示例中看到的那样,其中存在冗余代码,当尝试通过UglifyJS
或Terser
进行 uglify 时,这不利于优化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.