Using the Javascript 6to5 export module (now Babel)

Question

I'm still a newbie, I'm trying to export and import one class into the main file, another class into a file of other classes and use them.

And then gulp the ES5 code with 6to5 (now Babel).

// file a.js import B from 'b.js'; class A { constructor() { B.methodB(); } } export default A; // file b.js class B { methodB() { console.log('hi from b'); } } export default B; // file main.js import A from 'a.js'; new A(); 

My gulpfile file:

 var gulp = require('gulp'); var to5 = require('gulp-6to5'); gulp.task('default', function () { return gulp.src('main.js') .pipe(to5()) .pipe(gulp.dest('dist')); }); 

And this is my dist/main.js :

 "use strict"; var _interopRequire = function (obj) { return obj && (obj["default"] || obj); }; var A = _interopRequire(require("a.js")); new A(); 

Error in console: ReferenceError: require is not defined

Which, of course, does not work ... what am I doing wrong or what is missing? I do not understand.

Answer 1

I had the same problem in front of me ... As Qantas mentioned in the comments, Babel (previously 6to5) will convert the syntax, but it will not load the module or polyfill.

I found that the simplest workflow uses browserify with gulp . This will take care of transpilation, adding polylines, picking, minimizing and generating source maps in one hit. This question has a pretty nice example: Gulp + brown + 6to5 + source maps .

In this version minifixes and policies are added. An example for your case will look like this:

 let gulp = require('gulp'); let browserify = require('browserify'); let babelify = require('babelify'); let util = require('gulp-util'); let buffer = require('vinyl-buffer'); let source = require('vinyl-source-stream'); let uglify = require('gulp-uglify'); let sourcemaps = require('gulp-sourcemaps'); gulp.task('build:demo', () => { browserify('./demo/app.js', { debug: true }) .add(require.resolve('babel-polyfill/dist/polyfill.min.js')) .transform(babelify.configure({ presets: ['es2015', 'es2016', 'stage-0', 'stage-3'] })) .bundle() .on('error', util.log.bind(util, 'Browserify Error')) .pipe(source('demo.js')) .pipe(buffer()) .pipe(sourcemaps.init({ loadMaps: true })) .pipe(uglify({ mangle: false })) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('./demo')); }); gulp.task('default', ['build:demo']); 

It is important that uglify set mangle to false; it really doesn't look good with converted code.

If you do not have all the dependencies, you can create the package.json file and verify that the following packages are defined in the dependencies object:

 "devDependencies": { "babel-polyfill": "^6.13.0", "babel-preset-es2015": "^6.13.0", "babel-preset-es2016": "^6.11.0", "babel-preset-stage-0": "^6.5.0", "babel-preset-stage-3": "^6.11.0", "babelify": "^7.3.0", "browserify": "^13.1.0", "gulp": "^3.9.0", "gulp-sourcemaps": "^1.6.0", "gulp-uglify": "^2.0.0", "gulp-util": "^3.0.0", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0" } 

Most of them will not work if installed using -g , so think about yourself: P

Then just run npm install to install all the dependencies, and gulp to run the default task and pass all your code.

Your other files look good, you have the right idea with importing at the beginning of each file and exporting your default values ​​:) If you want some examples of babelified ES6 to be in the wild, I have several GitHub projects that can help .

Answer 2

It seems you need to import requirejs fond into your HTML like this:

 <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script> 

And your files should be something like this:

 // file a.js import B from './b'; class A { constructor() { B.methodB = function() { }; } } export default A; // file b.js class B { methodB() { console.log('hi from b'); } } export default B; // main.js import A from './a'; new A(); 

Note that you need to put the module directory ./a and ./b in import .

And your gulpfile should be:

 var gulp = require('gulp'); var to5 = require('gulp-6to5'); gulp.task('default', function () { return gulp.src('src/*.js') .pipe(to5()) .pipe(gulp.dest('dist')); }); 

Note that you need to convert your entire file using src/*.js gulp.src to gulp.src