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

Question

我已经用yo webpeck-reacct generetor恢复了一个react-webpack项目。https://github.com/lemueller/musicplayer-by-react.git

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

找不到模块：错误：无法在d： webdevelop reactjs musicplayer musicplayer-react react src components中解析模块'header'在D： WebDevelop Reactjs MusicPlayer musicPlayer-react src components中解析模块标头 在D： WebDevelop Reactjs MusicPlayer MusicPlayer-React node_modules中寻找模块 D： WebDevelop Reactjs MusicPlayer MusicPlayer-by-reactct node_modules header不存在（模块为目录） d： webdevelop reactjs musicplayer musicPlayer-by-react node_modules

解析：

我该如何解决它们？感谢Advace！

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

在js中，如何根据其自定义JS模块或项目文件导入文件有所不同。

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

import 'module'; // in node_modules folder

请注意用法，没有任何斜杠（/）或ofient（ .），这意味着在node_modules文件夹中找到模块。

但是，对于您在项目中制作的文件，例如：

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

请注意用法，使用./

开始

• ./表示在同一目录中查找文件。
• ../表示在父目录中查找文件。

Answer 2

从'./header.js';