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

Question

大家好，我有一个关于将文件导入单个 .js 文件的小问题。

哪种方式更好（最佳实践），用于的场景是什么：

因为我看到了，2并且3是相同的东西，但语法不同（也许Syntactic Sugar）。

Answer 1

这三个人做不同的事情。

import './file;'

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

import { something } from './file'

这只是something从文件中导入，因此打包器可以优化所有其他依赖项。我总是试着用那个代替

import * as evertything from './file'

这将在命名空间下从该模块导入所有内容，因此使 treeshaking 更加困难（捆绑器无法很好地对其进行优化）。如果您需要该依赖项中的所有内容，或者该依赖项是从外部加载的（例如import * as React from "react"），我只会使用它。

Answer 2

我想下面的 MDN 文档会让你清楚这些事情：

据我所知，当您只有一个默认导出时，使用第一种方法。当您有多个默认导出但您不希望加载所有导出并且只需要加载其中的少数时，请使用第二个。第三种情况是当您希望所有内容都位于单个对象下时（可以类似于其他编程语言中的命名空间使用）。