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

我正在玩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));
});

'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')
  );
})();

这是may的主脚本

这里一切正常，但是如果我使用标准的

import

语句，我什么也得不到：

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));
});

'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')
  );
})();

注意：

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));
});

'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')
  );
})();

• /component/test.jsx

  和

  /index.jsx

  已正确加载
• 我在大口喝的时候没有任何错误

• react

  ，

  react dom

  模块正在工作
• 我尝试使用另一条路径访问我的组件

  /public/js/component/test.jsx

  ，但在运行我的gulp任务时出错

  错误：找不到模块。/public/js/components/test'from'/Users/myuser/project/public/js'

  ，这意味着它正在像现在一样查找正确的模块，但不是在浏览器中
• 尝试使用和不使用

  .jsx

  扩展名，情况相同

如果有人想看得更深入，以下是回购协议：

---

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

您在

gulpfile.babel.js

中为您的应用程序创建了多个入口点（基本上，您创建了两个捆绑包）

const路径={
src:'./src',，
publicSrc:“./public/js”，
目的地：'/应用程序'，
bundle:'bundle.js'，
bundleDest:“./app/public/js”，
公开参赛作品：[
“./public/js/index”，
“./public/js/components/test”请在问题中包含代码。@loganfsmyth我用更多的代码细节更新了我的问题，无论如何，我留下了完整要点的链接，以便更广泛地查看。您的屏幕截图确实显示了一个控制台错误。不相关吗？让我们来看看。然后您应该阅读chatNice！谢谢，它正在工作，但我现在真的很困惑，我很抱歉我不应该传递我假装用于browserify的所有条目？不，browserify将遍历所有
require
调用（Babel将
import…
转换为require）并在生成捆绑包时将它们分割在一起。只有当您希望一个捆绑包用于url/x，另一个捆绑包用于/y时，才能使用多个入口点。很好！明白了！谢谢！