区分JavaScript导入语法

注意：这是我关于解构的第一篇文章的后续内容。导入语法非常自由地使用了解构，对于刚开始使用它的人来说，这真的很让人困惑。如果这一切看起来令人困惑，请先阅读我的另一篇文章！

让我们讨论一下如何将依赖项导入到节点项目中。随着工作变得越来越复杂，您将不可避免地遇到这样的语法：

import React, { useState, useEffect } from 'react';
import { Link } from 'gatsby';
import Button from '@material-ui/core/Button';
import moment from 'moment';

import { Layout } from '../components';

乍一看，这很简单。我们正在导入一些位以在React组件中使用。不过，正如您所想象的，我选择了这四行代码，因为每一行都是唯一的。事实上，在我作为一个蓬勃发展的Node/React开发人员的过程中，我找到了各种方法来搞乱其中的每一个。

你也会把事情搞砸的，那很好！现在，我是来帮忙的。

我们将按照复杂性的顺序逐一检查，我将尽力解释到底发生了什么，以及我在工作中对进口的看法。

简单的导入语法-最简单的情况

import moment from 'moment';

如果你使用过.Net语言，或者Python，或者Ruby，或者sun下的其他语言，这应该是你的第二天性。我在这里特别提到它是因为我们中的一些人以前可能从未见过它。

这是怎么回事？

嗯，结果很简单。moment是一个JavaScript库，已包含在我们的节点项目“spackage.json文件”sdependencies或devDependencies中。如果您对node不熟悉，并且与package.json不相似，请在此处阅读更多信息。

这行代码创建了对moment库中所有可用内容的引用，并将其放入一个变量中，我们可以使用该变量访问它。'moment'位（引号中）告诉编译器要获取哪个库。另一个变量是moment（不在引号中）。因此，从这里开始，我们可以像访问此文件中的任何其他变量一样访问moment:

import moment from 'moment';
console.log(
  moment().get('year')
);
// 2019

在幕后，这只是通过主文件中的export default获取moment库提供的所有内容，并将其填充到一个变量中—该变量可以有我们想要的任何有效名称！

这可能会让人困惑，但如果这个名字对你更有意义，你绝对可以这么做：

import ThatReallyUsefulDateLibrary from 'moment';
console.log(
  ThatReallyUsefulDateLibrary().get('year')
);
// 2019

从库中的某个位置导入组件

接下来-这个稍微复杂一点：

import Button from '@material-ui/core/Button';

这里我们从@material-ui库中获取组件。同样，这是相当简单的—但是从MaterialUI项目的结构的角度考虑这一点可能会有所帮助。MaterialUI输出大量优秀的东西，并将它们组织成逻辑分组。请这样想：

// material-ui exports
const muiExports = {
  core: {
    Button: () => {}, // some component
    TextField: () => {} // another useful component
    // and loads more
  }
}

使用上述Button的导入语法，我们告诉编译器给我们一个名为Button的导出对象的引用，该引用位于/core/Button下的@material-ui库中。编译器本质上将其视为上面代码段中的JSON对象。

这里的东西-这也意味着我们可以破坏它！此语法也适用于导入Button：

import { Button } from '@material-ui/core';

这也意味着我们可以在一行中从/core导入多个内容！

import { Button, TextField} from '@material-ui/core';

很酷吧？我知道这会让人困惑，但要坚持下去。不久你就会明白了。下面我们来看下一个例子：

import { Link } from 'gatsby';

砰！现在应该很容易了。Gatsby提供的一个功能是它们的link组件。我们只导入要在这里使用的组件。

重命名导入

但是如果我们的项目中已经有一个名为Link的组件呢？或者，如果我们正在制作一个Zelda fan site的图例，而Link已经在一个我们无法重命名的组件或变量中定义了呢？事实证明，在导入中重命名某个对象和在非结构化语句中重命名某个对象一样简单。我们可以这样重命名gatsby中的相同组件：

import { Link as GatsbyWebLink } from 'gatsby';

我们还可以在一条语句中重命名一个或多个已分解的导入：

import { 
  Link as GatsbyWebLink,
  graphql as graphqlQuery,
  useStaticQuery
} from 'gatsby';

还有一件事-如果在导入位置字符串中使用相对路径，编译器知道如何查找导出的内容：

import { Layout } from '../components';

就像其他地方一样，您可以在此处将内容合并并重命名为您的心意：

import {
  Layout,
  Button as SuperButton
} from '../components';

最好的并不总是最后一个，但这无疑是我今天要分享的最后一个例子：

import React, { useState, useEffect } from 'react';

如果你一直在家里玩，现在应该都很熟悉了-我们从react获取默认导出，我们将其放入变量react中。我们还从同一个库中解构了useState和useEffect。如果你在问自己，我们能不能也作为React的孩子访问useState？答案是-嗯，事实上，是的！

const [loading, setLoading] = React.useState(false);

const [loading, setLoading] = useState(false);

从执行的角度来看，它们都具有相同的功能，但后者被约定使用。

我想。原来这是一篇非常棘手的文章-有10亿种方法可以导入一个文件，我可能错过了很多案例。对于这里所示的一些不同的导入语法，肯定还有性能和捆绑大小的影响。虽然它们绝对是真正的限制，并且对应用程序的性能有真正的影响，但我还是把讨论留到了另一天——纯粹是为了简单。

还有一个不小的问题，使用import需要像Babel或Webpack这样的transpiler。这是另一个超级复杂的宇宙，我不确定我是否有能力在一篇博文中解释。这也意味着我已经跳过了演示上述语法如何与require()一起工作。坦率地说，这里要解释的内容太多了——未来对EcmaScript和node的改进将使它变得更好。