reactjs – React,ES6与Browserify,babel和gulp一起编译,发出导入组件

我正在玩ES6,Gulp和Browserify,我正在设置环境的第一步.

这是我的browserify task：

gulp.task('client', cb => {
return browserify({
        entries: paths.publicEntries, 
        extensions: ['.jsx'], 
        debug: true
    })
    .transform('babelify', {
        presets: ['es2015', 'react']
    })
    .bundle()
    .pipe(source(paths.bundle))
    .pipe(gulp.dest(paths.bundleDest));
});

这可能是主脚本index.jsx

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import TestPage from './components/test';

(() => {
  ReactDOM.render(
    <TestPage/>,
    document.getElementById('mainContainer')
  );
})();

这是我创建的组件test.jsx

'use strict';

import React from 'react';

class TestPage extends React.Component {
  render()
  {
    return <h1> Hello World! </h1>
  }
}

export default TestPage;

一切看起来都对我来说,但是使用index.jsx中的import语句有一种奇怪的行为(我不知道问题出在哪里).

为了确定什么工作,什么不工作,我替换了我的组件导入实际代码,如下所示：

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
//import TestPage from './components/test';

class TestPage extends React.Component {
  render()
  {
    return <h1> Hello World! </h1>
  }
}

(() => {
  ReactDOM.render(
    <TestPage/>,
    document.getElementById('mainContainer')
  );
})();

这里一切正常,但如果我使用标准的import语句,我什么都得不到：

注意：

> .component/test.jsx和./index.jsx正确加载.
>当我跑步时,我没有任何错误.
>反应,反应模块正在工作.
>我尝试使用另一个路径到我的组件./public/js/component/test.jsx但是在运行我的gulp任务时出现错误错误：无法从’/找到模块’./public/js/components/test’ Users / myuser / project / public / js’意味着它正在寻找正确的模块,就像现在一样,但不是在浏览器中.
>尝试使用和不使用.jsx扩展,同样的情况.

如果有人想要深入了解这里的回购：
https://github.com/nramirez/gulp_browserify_es6_babel_react

为了正确导入我的组件,我缺少什么？

您正在gulpfile.babel.js中为您的应用创建多个入口点(基本上,您正在创建两个捆绑包).

const paths = {
  src: './src',
  publicSrc: './public/js',
  dest: './app',
  bundle: 'bundle.js',
  bundleDest: './app/public/js',
  publicEntries: [
    './public/js/index',
    './public/js/components/test' <--- Remove this line.
  ]
};