时间戳

首页 > 解决方案 > 找不到模块'reactcomponent'

javascript - 找不到模块'reactcomponent'

问题描述

请我卡住了

我是 Web 开发人员，习惯于从后端生成 html

只是切换到反应，似乎是一种痛苦......

结构体

鲍尔.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"
  }
}

包.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"
  }
}

主.jsx

var itemlist = require('./components/itemlist');
React.render(<itemlist/>, app);

我得到的错误是 -

错误：找不到模块 './components/itemlist' -

这是没有意义的，因为路径是正确的

标签： javascriptreactjsgulp

解决方案

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);

项目列表.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,
  })
});

推荐阅读