ES6破坏和模块导入

ES6 Destructuring and Module imports

本文关键字：模块 导入 ES6      更新时间：2023-09-26

我的印象是这种语法：

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

最终结果与此相同：

import {Link} from 'react-router';

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

（我最初以为这是React路由器错误。）

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的不同捆绑代码：

// 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进行uglify时，这不利于优化。

相关文章：