CODEWITHSUNDEEP
javascriptgulpbrowserifybabeljsbabel-polyfill
MrJambon
MrJambon

Reputation: 11

ES6 imports and require not working properly with gulp/browserify/babelify

I have a simple Gulp configuration to transpile my javascript with babel :

gulp.task('js_dev', function () {
    var bundler = browserify({entries: ['js/index.js'], debug: true});
    bundler.external('jquery');
    return bundler
        .transform("babelify", {presets: ["es2015"]})
        .bundle()
        .on('error', function (err) {
            console.error(err);
            this.emit('end');
        })
        .pipe(source('dev.js'))
        .pipe(gulp.dest(jsdest));
});

With this, I can import my development files. But I can't import some package installed with npm (isotope, textfit, babel-polyfill...).

For example, if I import babel-polyfill in my index.js file :

import "babel-polyfill";

No errors with gulp, and the code seems to be added in dev.js, but it's not working, and I can't require it either : it gives an empty Object.

Same things for other npm modules (isotope for example). When I require them, it just gives an empty object. And Isotope is supposed to work with require.

Any idea what's happening ?

Thanks.

Upvotes: 0

Views: 941

Answers (2)

MrJambon
MrJambon

Reputation: 11

Alright, I found it. My JavaScript files were added to a CMS which already used AMD/Require.js. This conflicts with browserify.

The solution was here.

Upvotes: 1

riccardolardi
riccardolardi

Reputation: 1741

What about doing:

import BabelPolyfill from "babel-polyfill"

Upvotes: 0

Related Questions