React、ES6 使用 Browserify、babel 和 gulp 编译，问题导入组件

Question

我正在使用 ES6、Gulp 和 Browserify，我正处于设置环境的第一步。

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

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

我缺少什么才能正确导入我的组件？

Answer 1

您正在 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.
  ]
};

React、ES6 使用 Browserify、babel 和 gulp 编译，问题导入组件

React, ES6 compiling with Browserify, babel and gulp, issue importing components

browserify

reactjs

gulp

babeljs