Reactjs 无法使用gulp和react找到模块_Reactjs_Gulp_Ecmascript 6_Browserify_Babeljs

Reactjs 无法使用gulp和react找到模块

reactjs gulp ecmascript-6

Reactjs 无法使用gulp和react找到模块,reactjs,gulp,ecmascript-6,browserify,babeljs,Reactjs,Gulp,Ecmascript 6,Browserify,Babeljs,我是react.js新手，不知怎么地，我用gulp构建工具设置了react环境。我想创建自定义React组件并在另一个组件中使用它。请看我的代码并帮助我 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React and ES6</title> </head> <body>

我是react.js新手，不知怎么地，我用gulp构建工具设置了react环境。我想创建自定义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>

目录结构是

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)

import

语句中的路径与调用它的位置相关。相对于

Login.js

，您需要向上移动一个目录以访问

components/Header.js

。将导入更改为：

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

非常感谢。它解决了我的问题。

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

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)

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