导入节点模块与自定义组件 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 并从 index.js 导入 React，因为我们没有在 react 目录之后明确定义任何路径。所以，它类似于 react/index.js。如果您必须导入其他内容而不是 index.js，那么我们还需要指定文件路径。例如。 module/somefile.js.

现在，当您指定以 / 或 ./ 或 ../ 开头的路径时，它不会查看 node_modules 但会查看目录.您可以查看我的 another post 以了解链接路径如何工作的更多详细信息。

在链接的 post 中，它没有描述 ./ 路径。所以让我告诉你，它会找到当前的项目目录。例如。您的项目文件夹是 app 并且您指定 ./mydir/myfile 然后它将查找 app/mydir/myfile.js。如果您必须导入 javascript 文件，则无需指定 .js 扩展名。它会自动匹配 .js 扩展名。但是，如果您必须导入其他文件，例如。 .css 那么您还必须指定扩展名。