Question

ES6模块有点新鲜，发现自己在以下两种模式之间徘徊......

模式＃1 - import

上的解构

import { func1, func2, func3 } from 'my-funcs';

模式＃2 - const

上的解构

import * as myFuncs from 'my-funcs'; 
const { func1, func2, func3 } = myFuncs;

我喜欢模式＃1因为它的简洁，但我也喜欢模式＃2，因为它看起来更明确。

是否有充分的理由使用其中一个？

Answer 1

在ES6中，导入绑定到变量（而不是值）。这意味着如果导出模块更改了导出的变量，则更新的值将反映在导入它的所有模块中。

例如，假设我们有一个模块，它导出一个原始值，然后在一段未指定的时间后更改它。

myVar.js

export var myVar = "1";
setTimeout(() => {myVar = "2"}, 2000);

假设你这样导入它：

main1.js

import { myVar } from './myVar.js';
console.log(myVar);
setTimeout(() => { console.log(myVar); }, 3000);

输出结果为：

1
2

但是，如果您在导入变量后立即将原始值分配给变量，那么该值将保持不变。

main2.js

import * as MyVar from './myVar.js';
const myVar = MyVar.myVar;
console.log(myVar);
setTimeout(() => { console.log(myVar); }, 3000);

该计划的输出将是：

1
1

这种差异可能是你想要记住的。

Answer 2

第一个不是解构，它将命名导出导入模块范围。第二个导入名称为myFuncs的模块命名空间对象，然后对其进行解构。

主要区别在于，在第二种模式中，您已经获得了常量，而不是对导出的绑定的直接引用（可能会发生变化）。这很重要，例如对于循环依赖。

细微差别是附加标识符myFuncs，这是无用的。但它确实允许您访问模块的所有导出，这对于树木抖动非常重要 - 如果您只显式导入模块的某些部分，则捆绑器可能会产生较小的结果。

是否有充分的理由使用其中一个？

绝对 - 第一种模式更简单，更短，在边缘情况下正常工作，并且可以更好地进行优化。