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

Question

Can someone help me to understand how es6 import works?

As I know to import node modules I can write name of module without mentioning path ex:

import React from 'react';

However to import any custom component, I have to give path like:

import Header from "./components/Header";

Or to import scss

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

Can someone tell me how it works, why in case of nodule module I do not need to give path?

Answer 1

When you do not give path it will directly look into node_modules directory and find the provided module.

So,

import React from 'react';

It will look into node_modules/react and import React from index.js since we have not explicitly defined any path after react directory. So, it is similar to react/index.js . If you have to import something else rather than index.js then we'll need to specify the file path as well. For eg. module/somefile.js .

Now, when you specify path that is starting with / or ./ or ../ it will not look into node_modules but it will look in to the directory. You may look into my another post for more detail how linking path works.

In the linked post, it has no ./ path described. So let me tell you that it will find the current project directory. For eg. your project folder is app and you specify ./mydir/myfile then it will look into app/mydir/myfile.js . There's no need to specify .js extension necessarily if you have to import javascript file. It will automatically match the .js extension. But if you have to import other files for eg. .css then you must specify the extension as well.