导入节点模块与自定义组件ES6，React

Question

有人可以帮助我了解es6 import的工作原理吗？

我知道要导入节点模块，我可以写模块名称而无需提及路径ex：

import React from 'react';

但是要导入任何自定义组件，我必须给出如下路径：

import Header from "./components/Header";

或导入scss

import "../../scss/components/Header.scss";

有人可以告诉我它是如何工作的，为什么在结节模块的情况下我不需要给出路径？

Answer 1

如果不提供路径，它将直接进入node_modules目录并找到提供的模块。

所以

import React from 'react';

它将查找node_modules/react并从React导入index.js，因为我们没有在react目录之后明确定义任何路径。因此，它类似于react/index.js。如果您必须导入其他内容而不是index.js，那么我们还需要指定文件路径。例如。 module/somefile.js。

现在，当您指定以/或./或../开头的路径时，它将不会进入node_modules，而是会进入目录。您可以查看我的another post以获得更详细的链接路径工作原理。

在链接的帖子中，没有描述的./路径。因此，让我告诉您，它将找到当前项目目录。例如。您的项目文件夹为app，并且您指定了./mydir/myfile，它将进入app/mydir/myfile.js。如果必须导入javascript文件，则不必指定扩展名.js。它将自动匹配.js扩展名。但是，如果您必须导入其他文件，例如。 .css，然后还必须指定扩展名。