React，ES6使用Browserify，babel和gulp进行编译，发布导入组件

Question

我正在玩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已正确加载。
• 当我跑步时，我没有任何错误。
• react，react-dom个模块正在运作。
• 我尝试使用另一个路径到我的组件./public/js/component/test.jsx但是在运行我的gulp任务Error: Cannot find module './public/js/components/test' from '/Users/myuser/project/public/js'时出现错误，这意味着它正在找到正确的模块，就像现在一样，但不是在浏览器中。< / LI>
• 尝试使用和不使用.jsx扩展名，同样的情况。

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

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

Answer 1

您正在catch为您的应用创建多个入口点（基本上，您正在创建两个捆绑包）。

gulpfile.babel.js