使用带有javascript导入语法的括号

Question

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

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

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

import React, Component, PropTypes from 'react';

Answer 1

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"将接收导入值的对象的名称".但那是误导和不正确的; 首先,只有一个导入值,它将被"接收"(为什么不只是说"分配给"或"用于引用")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(原文如此),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';

Answer 2

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

这将从模块中获取导出的{ Component, PropTypes }成员并分别'react'将它们分配给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'

这是另一个例子(链接到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博士的博客文章现在是一个更好的参考.