120

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

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

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

import React, Component, PropTypes from 'react';
4

2 回答 2

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

这说：

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

这结合了您可能见过的两种常见语法

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

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

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

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

import name from "module-name";

并且说name是“将接收导入值的对象的名称”。但这是误导和不正确的。首先，只有一个import值，会被“received”（为什么不直接说“assigned to”，或者“used to refer to”）name，而这里的import值是从模块默认导出的.

另一种解释方式是注意上面的导入与

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，这是默认导出，而不是涵盖所有导出的保护伞。

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

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

import * as MyModule from 'my-module';

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

import myModuleDefault, * as myModule from 'my-module';
于 2015-06-28T09:36:54.527 回答
36 
import React, { Component, PropTypes } from 'react'

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

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

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

这是简写

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

这是另一个示例（指向 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...'

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

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 |

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

于 2015-06-28T06:00:37.820 回答