请我被困住了
我是Web开发人员,用于从后端生成html
只是切换到反应,似乎是...的痛苦
bower.json
{
"name": "ps-full-stack",
"description": "",
"main": "index.js",
"authors": [
"radu.hulubas <razorflashmedia>"
],
"license": "ISC",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"react": "^16.1.0"
}
}
的package.json
{
"name": "ps-full-stack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babelify": "^8.0.0",
"browser-sync": "^2.24.7",
"browserify": "^16.2.2",
"ejs": "^2.6.1",
"express": "^4.16.3",
"gulp": "^3.9.1",
"gulp-live-server": "0.0.31",
"path": "^0.12.7",
"react": "^16.4.2",
"reactify": "^1.1.1",
"vinyl-source-stream": "^2.0.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"cross-env": "^5.2.0"
}
}
main.jsx
var itemlist = require('./components/itemlist');
React.render(<itemlist/>, app);
我得到的错误是 -
错误:找不到模块'./components/itemlist' -
这是没有意义的,因为路径是正确的
问题在于写得很糟糕的需求声明。
这个:
var itemlist = require('./components/itemlist');
应该改变这个:
var itemlist = require('./components/itemlist.jsx');
将itemList组件更改为:
import React, { Component } from 'react'
export default class ItemList extends Component {
render() {
return (
<div> <h1>Grocery Listify</h1> </div>
)
}
}
并在您的主文件中导入它像这样:
import ItemList from './components/itemlist'
main.js
var express = require('express');
var app = new express();
const PORT = 7777;
app.get('/',function(req,res){
res.render('./../app/index.ejs',{});
})
.use(express.static(__dirname + '/../.tmp'))
.listen(PORT);
itemlist.jsx
var React = require('react/addons');
module.exports = React.createClass({
render: function(){
return (
<div>
<h1>Grocery Listify</h1>
</div>
)
}
});
gulp.js
var gulp = require('gulp');
var LiveServer = require('gulp-live-server');
var browserSync = require('browser-sync');
var browserify = require('browserify');
var reactify = require('reactify');
var source = require('vinyl-source-stream');
let path = require('path');
gulp.task('live-server',function(){
var server = new LiveServer('server/main.js');
server.start();
});
gulp.task('bundle',function(){
return browserify({
entries: 'app/main.jsx',
debug: true,
})
.transform(reactify)
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest('./.tmp'))
;
});
gulp.task('serve',['bundle','live-server'], function(){
browserSync.init(null,{
proxy:"http://localhost:7777",
port: 9001,
})
});