ES6模块+ Gulp

Question

I need to create bundle, app written with es6 modules. Example:

import Api from 'api';

function Loader(){
   // some code that user api
};

export default Loader;

Develop version converting to AMD via gulp-es6-module-transpiler and works fine with RequireJS. But i can't find way to build bundle from this. I've try to use gulp-es6-module-transpiler and gulp-browserify:

gulp.task('build_js', function() {
   gulp.src('app/**/*.jsx')
    .pipe(gulp_react({errLogToConsole: true}))
    .pipe(transpiler({
        type: 'cjs'
    }))
    .pipe(gulp.dest('./' + build_fld + '/'));
});

gulp.task('brow', ['build_js'] function(){
   gulp.src('dist/auto-name.js')
    .pipe(browserify())
    .pipe(gulp.dest('./' + build_fld + '/'));
});

But i have error from Browserify:

Error: module 'name' not found from 'd:\\Work\\lib.react-suggest\\dist\\fake_32525252.js';

But generally it's bad way, because as I understand browserify not suport vinyl streams, and it need first build js files with CommonJS modules, and then user Browserify.

Maybe I understand something wrong, and it can be build from one stream? What other solutions are possible? As result i want AMD for develop and CommonJS or Global for production.

App file stucture what i have:

/app
   -app.jsx
   -component1.jsx
   -component2.jsx
   -index.html
/.tmp
/dist
gulpfile.js

At result i want:

/app
   -app.jsx
   -component1.jsx
   -component2.jsx
   -index.html
/.tmp
  -app.js
  -component1.js
  -component2.js
  -index.html
/dist
  -app.min.js
gulpfile.js

Answer 1

From what I know, Browserify does accept stream in the add/require method. I am not sure if gulp call produces true stream. However frankly why would use gulp in there when you can call browserify api directly to produce result?

var b = browserify();
b.add('dist/auto-name.js');
b.bundle().pipe(gulp.dest('./' + build_fld + '/'));

Unless of course you are doing some other magic with Gulp you haven't shown here. In that case good luck :)

Answer 2

You can use 0.2.0 version of gulp-es6-module-transpiler . It supports bundle and commonjs formatters, so building a bundle should not be a problem. As for AMD, you can use es6-module-transpiler-amd-formatter module.