Response, build ES6 with Browserify, babel and gulp, release import components

Question

I play with ES6, Gulp and Browserify, I set up my environment in my first steps.

This is my browser 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));
});

It could be main script index.jsx

'use strict';

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

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

This is the component that I created test.jsx

'use strict';

import React from 'react';

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

export default TestPage;

Everything looks right to me, but there is strange behavior using import statements in index.jsx(I don’t know exactly where the problem is).

To make sure what works and what doesn't, I replaced the import of my component with the actual code as follows:

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

Everything works correctly here, but if I use the standard importoperator, I get nothing:

Note:

• ./component/test.jsxand ./index.jsxload correctly.
• 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.
  ]
};