0

这是我尝试制作的第一个反应应用程序，但我遇到了这个错误。文件结构似乎是正确的，也是我的起点。请帮我弄清楚为什么它找不到 main.jsx 模块。

文件结构

react-skeleton
 |
 +-- node_modules
 |    
 +-- public
 |  |  
 |  +-- js
 |  |    |
 |  |    +-- main.js
 |  |
 |  +--index.html
 |
 +-- src
 |  |  
 |  |  
 |  +-- components
 |  |    |
 |  |    +-- List.jsx
 |  |    |
 |  |    +-- Listitem.jsx
 |  |
 |  +--main.jsx
 |
 |    
 +-- package.json

索引.html 

<!DOCTYPE html>
<html>
    <head>
        <title>CommonJS React skeleton</title>
    </head>
    <body>
        <div id="ingredients">

        </div>

    <script src="js/main.js"></script>
    </body>

</html>

列表.jsx 

    var React = require('react');
var ListItem = require('./Listitem.jsx');

var ingredients = [{"id":1, "text":"ham"},{"id":2, "text":"cheese"},{"id":3, "text":"potato"}];

var List = React.createClass({
    render: function(){
        var listItems = ingredients.map(function(item){
            return <ListItem key={item.id} ingredient  = {item.text} />;
        });

        return (<ul>{listItems}</ul>);
    }
});

module.exports = List;

Listitem.jsx

var React = require('react');
var ListItem = React.createClass({
    render: function(){
    return (
        <li>
            <h4>{this.props.ingredient}</h4>
        </li>
    );
    }
});

module.exports = ListItem;

主.jsx

var React = require('react');
  var ReactDOM = require('react-dom');
  var List = require('./components/List.jsx');

  ReactDOM.render(<List />, document.getElementById('ingredients'));

包.json

{
  "name": "react-skeleton",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "watchify ./src/main.jsx -v  -t [babelify --presets [ react ] ] -o ./public/js/main.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/SoeRatch/react-skeleton.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/SoeRatch/react-skeleton/issues"
  },
  "homepage": "https://github.com/SoeRatch/react-skeleton#readme",
  "dependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^7.3.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "watchify": "^3.9.0"
  }
}

我使用npm start在我的终端上运行它，我的终端上的错误是这样的：

    > react-skeleton@1.0.0 start /home/suraj/Desktop/REACTJS/project/react-skeleton
    > watchify src/main.jsx -v  -t [babelify --presets [ react ] ] -o public/js/main.js

Error: Cannot find module '/home/suraj/Desktop/REACTJS/project/react-skeleton/src/main.jsx' from '/home/suraj/Desktop/REACTJS/project/react-skeleton'
4

0 回答 0