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
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 :)
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.