ReactJS 在 main.js 中使用 header.js。在 node_modules 中找不到 header.js

Question

我用 webpeck-react 生成器生成了一个 react-webpack 项目。 https://github.com/LeMueller/musicplayer-by-react.git

我在Main.js中使用header.js。但我总是得到错误：

找不到模块：错误：无法在 D:\WebDevelop\ReactJS\musicplayer\musicplayer-by-react\src\components 中解析模块 'header' 在 D:\WebDevelop\ReactJS\musicplayer\musicplayer-by-react\src\components 中解析模块 header 在 D:\WebDevelop\ReactJS\musicplayer\musicplayer-by-react\node_modules 中寻找模块 D:\WebDevelop\ReactJS\musicplayer\musicplayer-by-react\node_modules\header 不存在（模块作为目录）在 D:\WebDevelop\ReactJS\musicplayer\musicplayer-by-react\node_modules

中解析 'file' header

我该如何解决它们？提前致谢！

Main.js:

require('normalize.css/normalize.css');
require('styles/App.css');

import React, {Component} from 'react';
import Header from 'header.js';
//import Header from 'header';
//require('header.js');


let yeomanImage = require('../images/yeoman.png');

class AppComponent extends React.Component {
  render() {
    return (
      <div className="index">
        <img src={yeomanImage} alt="Yeoman Generator" />
        <div className="notice">Please edit <code>src/components/Main.js</code> to get started!</div>
        <Header />
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default AppComponent;

header.js:

import React, {Component} from 'react';
import '../styles/header.less';

export default class Header extends Component {

    render() {
        return (
            <div className="component-header">
                <img src={require('../../images/logo.png')}  width={40} className="-col-auto"/>
                <h1 className="caption">Music Player by React</h1>
            </div>
        );
    }
}

Answer 1

从“./header.js”导入 Header；

Answer 2

在 js 中，根据自定义 js 模块或项目文件的不同，导入文件的方式也有所不同。

对于自定义 JS 模块，我们像下面这样使用它。（一般取自 npm 或 yarn）

import 'module'; // in node_modules folder

注意用法，没有任何斜杠（/）或句点（.），这意味着在node_modules文件夹。

但是对于你在项目中制作的文件导入如下：

import './module'; // same directory
import './module'; // parent directory, one dir level up

注意用法，starting with the ./

ReactJS 在 main.js 中使用 header.js。在 node_modules 中找不到 header.js

ReactJS use header.js in main.js. header.js is not found in node_modules

generator

reactjs

webpack

yo