使用括号与 javascript 导入语法 [英] using brackets with javascript import syntax

问题描述

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

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

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

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

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

import React, Component, PropTypes from 'react';

推荐答案

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

这说:

从 'react' 以 React 名称导入 default 导出并导入 named 导出 Component 和 PropTypes 同名.

Import the default export from 'react' under the name React and import the named exports Component and PropTypes under the same names.

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

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.

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

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 and named 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 import syntax you refer to.

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

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

import name from "module-name";

并且说 name 是将接收导入值的对象的名称".但这是误导和不正确的；首先，只有一个导入值，它会被接收"(为什么不直接说分配给"，或者用来引用")name，本例中的导入值是模块的默认导出.

and said name is the "name of the object that will receive the imported values." But that's misleading and incorrect; first of all, there is only one import 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 export from the module.

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

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

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

和 OP 的示例完全相同

and the OP's example is precisely identical to

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

MDN 文档继续展示示例

The MDN documentation went on to show the example

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

并声称这意味着

导入整个模块的内容，其中一些还被明确命名.这会将 myModule(原文如此)、foo 和 bar 插入到当前作用域中.注意 foo 和 myModule.foo 是一样的，bar 和 myModule.bar

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

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

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

导入默认模块导出和一些显式命名的导出.这会将 MyModule、foo 和 bar 插入到当前作用域中.导出名称foo 和bar不能通过MyModule 访问，这是默认导出，而不是涵盖所有导出的保护伞.

Import the default module export and some explictly named exports. This inserts MyModule, foo, and bar into the current scope. The export names foo and bar are not accessible via MyModule, which is the default export, not some umbrella covering all exports.

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

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

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

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

import * as MyModule from 'my-module';

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

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

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

这篇关于使用括号与 javascript 导入语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！