只是想知道哪一个是使用导入的最佳方式:
将*作为Foo从'导入/foo’代码>
对比:
< code >从'导入{ bar,bar2,bar3 }。/foo ';
就效率而言,比方说,我使用webpack捆绑所有的JavaScript文件。即使我没有在主代码中使用它们,第一个会导入所有东西吗?
我可以找到一些参考资料:
在Airbnb风格指南中,他们建议不要使用通配符,所以总是会有默认的导入对象。
如果你使用新的uglify提供的带有死代码消除的webpack,或者使用带有树抖动的rollupjs,那么未使用的导入将被剥离。
我部分同意不使用通配符导入的Airbnb样式指南,尽管 javascript 通配符导入不会遭受与例如 pythons 或 javas 通配符导入相同的疾病,即它不会污染其他模块中定义的变量名称的范围(您只能通过 moduleB.foo
访问它们,而不能
使用 import * 作为模块 B 从 ...
关于测试的文章:我有点理解这些担忧,但我没有看到任何无法解决的问题。您可以使用一些自定义模块加载程序来模拟导入本身(自定义amd模块加载程序实际上是15行代码),因此您不必破坏测试模块的本地范围。
关于问题的这一部分:
即使我没有在主代码中使用它们,第一个是否真的会导入所有内容?
以下是如何使用Babel 6.26进行编译:
import { bar, bar2, bar3 } from './foo';
…变成…
'use strict';
var _foo = require('./foo');
import * as Foo from './foo';
…变成…
'use strict';
var _foo = require('./foo');
var Foo = _interopRequireWildcard(_foo);
function _interopRequireWildcard(obj) {
if (obj && obj.__esModule) {
return obj;
} else {
var newObj = {};
if (obj != null) {
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key))
newObj[key] = obj[key];
}
}
newObj.default = obj;
return newObj;
}
}
在这两种情况下,整个文件都是通过< code>require导入的。
对于通配符导入,定义了一个< code > _ interopRequireWildcard 函数,用于将所有导出分配给名称空间变量。
值得注意的是,编译后的代码将只包含一个_interopRequireWildcard
定义,并且每次导入都需要调用和
_interopRequireWildcard
。
最终,通配符导入的使用将在运行时涉及更多的处理,并导致编译的 js 的大小略有增加。
由于使用现代的WebPack设置,两者将生成相同的编译/传输JS,因此命名导入的真正价值在于它更具表达性。通过命名你的导入,你告诉任何一个打开文件的人你将要使用的模块的功能。这可能有帮助的一个例子是当编写测试时,如果模仿是必要的,您有一个显式的导入列表来模仿。