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 已正确加载。
• 我在运行 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 扩展名，情况相同。

如果有人想深入了解这里的 repo： 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.
  ]
};