ES6模块-导入文件的3种方式

Question

大家好，我对将文件导入单个.js文件存在一些疑问。

哪种方法更好（最佳实践），用于哪种情况？

1. import './file;'

2. import { something } from './file'

3. import * as evertything from './file'

因为我看到2和3是同一件事，但语法不同（也许是Syntactic Sugar）。

Answer 1

三个人都做不同的事情。

  

import './file;'

这将加载文件，并且不导入任何内容。如果要初始化该模块（或添加一些外部依赖项，例如，如果使用Webpack则为css文件），这将很有用。

  

import { something } from './file'

这只是从文件中导入something，因此捆绑程序可以优化所有其他依赖项。我总是会尝试与此而不是

  

import * as evertything from './file'

那会从该模块在命名空间下导入一切，因此使树状握手更加困难（捆绑程序无法对其进行优化）。如果您需要该依赖项中的所有内容，或者该依赖项还是从外部加载（例如import * as React from "react"），我只会使用它。

Answer 2

我想以下MDN文档将使您清楚这些事情：

import - JavaScript|MDN

据我所知，当您只有一个默认导出时，将使用第一种方法。当您有多个默认导出但不希望全部加载并且只希望其中的几个导出时，将使用2nd。第三种情况是您希望将所有内容都放在一个对象下（可以与其他编程语言中的名称空间类似地使用）。