使用括号与 javascript 导入语法

using brackets with javascript import syntax

提问by fox

I came across a javascript library that uses the following syntax to import libraries:

我遇到了一个使用以下语法导入库的 javascript 库：

import React, { Component, PropTypes } from 'react';

What is the difference between the above method and the following?

上面的方法和下面的有什么区别？

import React, Component, PropTypes from 'react';

回答by

import React, { Component, PropTypes } from 'react';

This says:

这说：

Import the defaultexport from 'react'under the name Reactand import the namedexports Componentand PropTypesunder the same names.

从名称下导入默认导出并以相同名称导入命名导出。'react'ReactComponentPropTypes

This combines the two common syntaxes which you've probably seen

这结合了您可能已经看到的两种常见语法

import React from 'react';
import { Component, PropTypes } from 'react';

The first being used to import and name the default export, the second to import the specified named exports.

第一个用于导入和命名默认导出，第二个用于导入指定的命名导出。

As a general rule, most modules will either provide a single, default export, or a list of named exports. It is somewhat less usual for a module to provide both a default export andnamed exports. However, in the case where there is one feature which is most commonly imported, but also additional sub-features, it is a valid design to export the first as the default, and the remaining ones as named exports. It is in such cases you would use the importsyntax you refer to.

作为一般规则，大多数模块将提供单个默认导出或命名导出列表。模块提供默认导出和命名导出的情况有点少见。但是，如果有一个最常导入的功能，但还有其他子功能，则将第一个导出为默认值，将其余的导出为命名导出是一种有效的设计。在这种情况下，您将使用import您引用的语法。

The other answers are somewhere between wrong and confusing, possibly because the MDN documents at the time this question was asked were wrong and confusing. MDN showed the example

其他答案介于错误和混乱之间，可能是因为提出这个问题时的 MDN 文档是错误和混乱的。MDN 展示了示例

import name from "module-name";

and said nameis the "name of the object that will receive the imported values." But that's misleading and incorrect; first of all, there is only oneimport value, which will be "received" (why not just say "assigned to", or "used to refer to") name, and the import value in this case is the default exportfrom the module.

并表示name“将接收导入值的对象的名称”。但这是误导和不正确的。首先，只有一个导入值，它将被“接收”（为什么不只是说“分配给”或“用于引用”）name，并且在这种情况下导入值是模块的默认导出.

Another way of explaining this is to note that the above import is precisely identical to

解释这一点的另一种方式是注意上述导入与

import { default as name } from "module-name";

and the OP's example is precisely identical to

并且 OP 的示例与

import { default as React, Component, PropTypes } from 'react';

The MDN documentation went on to show the example

MDN 文档继续展示了这个例子

import MyModule, {foo, bar} from "my-module.js";

and claimed that it means

并声称这意味着

Import an entire module's contents, with some also being explicitly named. This inserts myModule(sic), foo, and barinto the current scope. Note that fooand myModule.fooare the same, as are barand myModule.bar

导入整个模块的内容，其中一些也被明确命名。这会将myModule(sic)、foo和bar插入当前范围。请注意，foo和myModule.foo是相同的，就像是bar和myModule.bar

What MDN said here, and what other answers claim based on the incorrect MDN documentation, is absolutely wrong, and may be based on an earlier version of the spec. What this actually does is

MDN 在这里所说的，以及基于不正确的 MDN 文档的其他答案所声称的，是绝对错误的，并且可能基于规范的早期版本。这实际上是做什么的

Import the default module export and some explictly named exports. This inserts MyModule, foo, and barinto the current scope. The export names fooand barare notaccessible via MyModule, which is the defaultexport, not some umbrella covering all exports.

导入默认模块导出和一些显式命名的导出。这会将MyModule、foo和bar插入当前范围。出口名称foo和bar是不是访问的通过MyModule，这是默认的出口，而不是一些伞覆盖全部出口。

(The default module export is the value exported with the export defaultsyntax, which could also be export {foo as default}.)

（默认模块导出是使用export default语法导出的值，也可以是export {foo as default}.）

The MDN documentation writers may have gotten confused with the following form:

MDN 文档作者可能对以下形式感到困惑：

import * as MyModule from 'my-module';

This imports all exports from my-module, and makes them accessible under names such as MyModule.name. The default export is also accessible as MyModule.default, since the default export is really nothing more than another named export with the name default. In this syntax, there is no way to import only a subset of the named exports, although one could import the default export, if there is one, together with all the named exports, with

这将从 导入所有导出my-module，并使它们能够以MyModule.name. 默认导出也可以访问 as MyModule.default，因为默认导出实际上只不过是另一个具有 name 的命名导出default。在这种语法中，没有办法只导入命名导出的一个子集，尽管可以导入默认导出，如果有的话，连同所有命名导出，

import myModuleDefault, * as myModule from 'my-module';

回答by royhowie

import React, { Component, PropTypes } from 'react'

This will grab the exported { Component, PropTypes }members from the 'react'module and assign them to Componentand PropTypes, respectively. Reactwill be equal to the module's defaultexport.

这将从模块中获取导出的{ Component, PropTypes }成员'react'并将它们分别分配给Component和PropTypes。React将等于模块的default出口。

As noted by torazaburo below, this is the same as

正如下面的 torazaburo 所指出的，这与

import { default as React, Component, PropTypes } from 'react'

which is shorthand for

这是简写

import { default as React, Component as Component, PropTypes as PropTypes} from 'react'

Here's another example (link to gist):

这是另一个例子（链接到 gist）：

// myModule.js
export let a = true
export let b = 42
export let c = 'hello, world!'
// `d` is not exported alone
let d = 'some property only available from default'

// this uses the new object literal notation in es6
// {myVar} expands to { myVar : myVar }, provided myVar exists
// e.g., let test = 22; let o = {test}; `o` is then equal to { test : 22 }
export default { a, b, d }

// example1.js
import something from 'myModule'
console.log(something)
// this yields (note how `c` is not here):
/*
  {
    a : true,
    b : 42,
    d : 'some property only available from default'
  }
*/

// example2.js
import something, { c } from 'myModule'
console.log(something)  // same as above; the `default` export
console.log(c)          // c === 'hello, world!'

// example3.js
import { a, b, d, default as something } from 'myModule'
console.log(a)            // a === true
console.log(b)            // b === 42
console.log(d)            // d === undefined (we didn't export it individually)
console.log(something.d)  // something.d === 'some property...'

---

---

I tested the second example with babel:

我用 babel 测试了第二个例子：

import test, test3, test2 from './app/lib/queries.js'
console.log(test, test3, test2)

and got a syntax error.

并出现语法错误。

~/code/repo/tutoring $ babel-node test.js
/Users/royhowie/.node/lib/node_modules/babel/node_modules/babel-core/lib/babel/transformation/file/index.js:601
      throw err;
            ^
SyntaxError: /Users/royhowie/code/repo/tutoring/test.js: Unexpected token (1:13)
> 1 | import test, test3, test2 from './app/lib/queries.js'
    |              ^
  2 | 
  3 | console.log(test, test3, test2)
  4 | 

---

---

For reference, you can read up on the new importdocumentation from MDN. However, it is apparently in need of technical review. Dr. Axel Rauschmayer's blog postis a better reference for now.

作为参考，您可以阅读importMDN的新文档。然而，它显然需要技术。Axel Rauschmayer 博士的博客文章现在是更好的参考。