Question

我已经使用你的webpeck-react generetor生成了一个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中解析模块头在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

中的'文件'标题

我该如何解决？谢谢你的推荐！

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模块，我们使用它如下所示。（通常取自plt.figure();plt.loglog([1,10,60],[1,0.1,0.005]) plt.axis('off') plt.arrow(2,0.002,5,0.098,'k',head_length=0.3)或npm）

yarn

注意使用情况，没有任何斜杠（import 'module'; // in node_modules folder）或句点（/），这意味着在.文件夹中找到该模块。

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

node_modules

注意使用开始并使用import './module'; // same directory import './module'; // parent directory, one dir level up

Answer 2

从'./header.js'导入标题;

ReactJS在main.js中使用header.js.在node_modules

2 个答案: