Question

我是react.js的新手，不知怎的，我已经设置了与gulp构建工具的环境反应。我想创建自定义的React组件并在另一个组件中使用它。请查看我的代码并帮助我。

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React and ES6</title>
</head>
<body>

    <div id="testdiv"></div>

    <script src="web/js/dist/login.js"></script>
</body>
</html>

Header.js

import React from "react";

export class Header extends React.Component {
  render(){
    return (
      <nav class="navbar navbar-static-top">
        <div class="navbar image-container"></div>
        <nav class = "navbar menu-container">
          <ul>
            <li><a>Home</a></li>
            <li><a>About</a></li>
            <li><a>Contact Us</a></li>
          </ul>
        </nav>
      </nav>
    );
  }
}

和Login.js

import React from "react";
import {render} from "react-dom";
import {Header} from "./components/Header.js";

class Login extends React.Component {

  render(){
    return(
      <div>
        <Header/>
        <h1>Login Test!!</h1>

      </div>
    );
  }
}
render(<Login/>, window.document.getElementById("testdiv"));

gulpfile.js

// declarations, dependencies
// ----------------------------------------------------------------------------
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var gutil = require('gulp-util');
var babelify = require('babelify');
var notifier = require('node-notifier');
var watchify = require('watchify');

// External dependencies you do not want to rebundle while developing,
// but include in your application deployment
var dependencies = [
    'react',
    'react-dom'
];

// Gulp tasks
// ----------------------------------------------------------------------------
gulp.task('scripts', function () {
    bundleApp(true);
});

gulp.task('deploy', function (){
    bundleApp(true);
});

gulp.task('watch', function () {
    gulp.watch([
    './app/Controller/*.js'
  ], ['scripts']);
});


var notify = function(title, message) {
  notifier.notify({
    title: title,
    message: message
  });
  gutil.log(title + ': ' + message);
};

// When running 'gulp' on the terminal this task will fire.
// It will start watching for changes in every .js file.
// If there's a change, the task 'scripts' defined above will fire.
gulp.task('default', ['scripts','watch']);

var reactFiles = {
  path: [
    {
      from: ['app/components/Header.js'],
      to: 'Header.js'
    },
    {
      from: ['app/components/Home.js'],
      to: 'Home.js'
    },
        {
      from: ['app/controller/login.js'],
      to: 'login.js'
    }
  ],
  watchPath: ['web/controller/*.js']
};

// Private Functions
// ----------------------------------------------------------------------------
function bundleApp(isProduction) {
    // Browserify will bundle all our js files together in to one and will let
    // us use modules in the front end.
  var finished = 0;
  reactFiles.path.map(function(reactModuleEntry){
    var appBundler = browserify(reactModuleEntry.from)
    .transform(babelify, { presets: ['es2015', 'react'] })
    .bundle();

    appBundler.pipe(source(reactModuleEntry.to))
    .pipe(gulp.dest('./web/js/dist'))
    .on('finish', function() {
            finished++;
            if (finished === (reactFiles.path.length - 1)) {
              notify('Reactify', 'build: done')
              //done();
            }
          });
  });

}

目录结构

ReactPractice
|
|---index.html
|---gulpfile.js
|--app
    |---Components
    |             |--Header.js
    |---Controller
    |             |--Login.js

运行gulp文件时出错

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: Cannot find module './components/Header.js' from '/home/subro/reactpractice/app/controller'
    at /home/subro/reactpractice/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
    at load (/home/subro/reactpractice/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/home/subro/reactpractice/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /home/subro/reactpractice/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at Object.oncomplete (fs.js:107:15)

Answer 1

import语句中的路径与调用它的位置有关。相对于Login.js，您需要向上移动目录以访问components/Header.js。将导入更改为：

import {Header} from '../components/Header';

使用gulp找不到模块并做出反应

1 个答案: