Loading gulp-plugins that default to ES6 modules

[nirazul]

Hey!

I'm trying to lazy-load gulp-stylelint with gulp-load-plugins. Unfortunately, it has the new module structure of ES6, which doesn't seem to be handled by this package.

What's the best way to make it work? I'm aware, I could always load it myself and it also works that way: import stylelint from 'gulp-stylelint';

Nonetheless, I'd prefer to load it that way: $.stylelint ...mostly because I'm lazy and I've grown to that system :)

[jackfranklin]

Hey!

So if you're not in ES6 you need to refer to the module as so:

var gulpStylelint = require('gulp-stylelint').default;

What I think this means is you should be able to do:

$.stylelint.default

To make it work - could you try?

Going forward though I can see the value in having this logic inside gulp-load-plugins, although not by default and probably enabled on a plugin basis. If you have any suggestions on what the API might look like I'd love to hear them :)

[nirazul]

Unfortunately, this works neither. This way I'm getting notified, that I'm calling default from undefined. So either way, I'm out of luck.

For me it would be completely ok to load it by $.stylelint.default, as long as this works.

[callumacrae]

https://github.com/olegskl/gulp-stylelint/blob/master/package.json#L7

If you look at the resulting JS, you've got this:

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = gulpStylelint;

Does it work if you get it as require('gulp-stylelint').default?

[nirazul]

Ok, I think I've found the error. I've simply forgotten to call default. Instead, I just wrote: .pipe( $.stylelint.default ) ...which fails. Sorry for wasting your time!

For me, it's ok to write .pipe( $.stylelint.default( <options> ) ). Maybe it'd be a good idea to display a warning if you register an es6 (probbably a module that has default as only value ?).

Or maybe a better idea would be to have an option object, which modules should be loaded with es6 in mind:

{
    es6 / loadAsModule / es2015 / esExport / loadDefault / esModule / loadAsDefault: [
        'gulp-stylelint'
    ]
}

[jackfranklin]

@Nirazul no worries, glad it's working.

I'm up for adding that option, although my concern at the moment is that we seem to have added quite a lot of options so far to this plugin and we should consider carefully adding more.

@callumacrae what do you think?

[callumacrae]

I'm not really sure. On the one hand, this is a babel-specific problem and I wouldn't usually be for working around a problem caused by another library in this one. But on the other, this project is basically incompatible with ES6 modules in its current form and it won't work with the native implementation either (if that ever happens).

Do you know what's happening with native ES6 modules and nodejs?

[jackfranklin]

They are in progress, but I don't know enough about the detail.

For now, I'm tempted to add this to the README, and if it becomes a more common issue (I expect given time it will), let's work on a solution?

@Nirazul do you fancy doing a PR into the README to highlight this difference?

[nirazul]

@jackfranklin With pleasure. Just give me a few days, it's gonna be a rough week for me ;)

[jackfranklin]

@Nirazul no rush at all, thank you :)

[aaronroberson]

I was hoping to use this plugin with ES6. I have a gulpfile.babel.js and a .babelrc file and babel installed locally. But it doesn't appear to work when doing something like the following:

import $ from 'gulp-load-plugins';
...
  .pipe($.somePlugin())
...

From the discussion above, I can't tell if ES6 support is on the roadmap?

[jackfranklin]

@aaronroberson in your above example you'd need to invoke $:

import gulpLoadPlugins from 'gulp-load-plugins';
const $ = gulpLoadPlugins();
$.somePlugin() // should now work

I need to catch up with this, but for now I think until this becomes a wider problem some docs in the README are the best solution. I'd love a PR if someone can beat me to it :)

[jackfranklin]

@Nirazul if you're still hitting this problem, I think 1.3.0 will let you get around it with:

var $ = require('gulp-load-plugins')({
  postRequireTransforms: {
    stylelint: function(stylelint) { return stylelint.default }
  }
});

See https://github.com/jackfranklin/gulp-load-plugins#postrequiretransforms-13-only for more info.

[jameelmoses]

closing as this is no longer an issue

[kritidipto-1234]

Is it possible to use ES6 only libraries now ? I am trying to use https://www.npmjs.com/package/gulp-strip-debug?activeTab=readme and it doesnt work .