使用括号与JavaScript导入语法

我碰到一个JavaScript库，使用以下语法来导入库：

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

上述方法和以下方法有什么区别？

 import React, Component, PropTypes from 'react'; 

Answer 1

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

这说：

在名称React下从'react'导入默认导出，并使用相同名称导入命名导出Component和PropTypes 。

这结合了你可能看到的两种常见的语法

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

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

通常，大多数模块将提供一个单一的默认导出或一个命名导出列表。 提供默认导出和命名导出的模块通常不太常见。 但是，如果有一个特征是最常input的，而且还有其他的子特征，那么导出第一个特征作为默认特征是有效的，而其余特征是导出特征。 在这种情况下，您将使用您引用的import语法。

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

 import name from "module-name"; 

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

解释这个的另一种方法是注意到上面的导入是完全相同的

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

和OP的例子完全相同

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

MDN文档继续展示这个例子

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

并声称这意味着

导入整个模块的内容，其中一些也被明确命名。 这将myModule （sic）， foo和bar插入到当前作用域中。 请注意， foo和myModule.foo与bar和myModule.bar

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

导入默认模块导出和一些明确命名的导出。 这将MyModule ， foo和bar插入到当前作用域中。 导出名称foo和bar不能通过MyModule访问， MyModule是默认导出，不是覆盖所有导出的伞。

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

MDN文档编写者可能会对以下forms感到困惑：

 import * as MyModule from 'my-module'; 

这将从my-module导入所有导出，并使其可以在诸如MyModule.name名称下访问。 默认导出也可以作为MyModule.default访问，因为默认导出实际上只不过是名称为default另一个命名导出。 在这种语法中，没有办法只导入命名导出的一个子集，尽pipe可以导入默认导出（如果有的话）和所有命名的导出

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

Answer 2

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

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

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

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

这是速记

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

这是另一个例子（ 链接要点 ）：

 // 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 // eg, 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...' 

---

我用babeltesting了第二个例子：

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

并得到一个语法错误。

 ~/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 | 

---

作为参考，您可以阅读MDN的新import文档。 但是，显然需要技术审查。 Dr. Axel Rauschmayer的博客文章现在是更好的参考。