ES6 - Using babel/traceur with jQuery plugins

Question

I want to be able to write ES6 with jQuery plugins and compile the code down to ES5 using Gulp Babel, without having to use Browserify to make them work.

For example, I may have a class like this:

import $ from 'jquery';
import somePlugin from 'somePlugin';

class myClass {
    constructor(options) {
        this.defaults = {
            $body: $('body')
        };

        this.options = $.extend(this.defaults, options);

        $body.somePlugin();
    }
}

I can get this to work if I use Babelify but I'd prefer to find a way where I do not have to depend on another process. When I just use Babel, I get this error in the console: Uncaught ReferenceError: require is not defined. I checked the code and it looks like it's turning the imports into requires.

Is there a way around this or will I have to stick with using Browserify (Babelify) to compile the JavaScript?

EDIT: I am currently using browserify-shim to make the jQuery plugins work too

EDIT2: No this is not about RequireJS - I'm trying to remove the use of Browserify with Babel

possible duplicate of [What is the difference between browserify/requirejs modules and ES6 modules](http://stackoverflow.com/questions/28674652/what-is-the-difference-between-browserify-requirejs-modules-and-es6-modules) — rxgx, May 28 '15 at 17:51
RequireJS is the only module system that is also a module bundler. Until browsers adopt ES6, we need to use a module bundler if not implementing RequireJS. — rxgx, May 28 '15 at 17:54
@rxgx ES6 handles modules already. As I said, I can use Babel and Browserify to make this work but I'd rather not use Browserify. — 30secondstosam, May 28 '15 at 18:18
You should have a look at https://babeljs.io/docs/usage/modules/. I'm not sure you understand the role that browserify plays. Babel, by default, converts ES6 modules to CommonJS modules. CommonJS is a module system used by Node.js. Browsers don't have a module system at all. This is where browserify comes into play. It bundles a module and all its dependencies into a single file which can be executed in browsers. If you don't want to use browserify, you have to convert to a different module system and add the necessary dependencies. (Or no module system and see if it works). — Felix Kling, May 28 '15 at 18:23
@FelixKling Perhaps not clear in what I'm writing but I do understand the role the both play. But I also get what you're saying. Thanks for the tip — 30secondstosam, May 28 '15 at 18:26

30secondstosam · Accepted Answer · 2015-06-01T16:15:06.610

2

Answering my own question here. I did some digging and it looks like the best way of dealing with this issue at the moment is using jspm with the es6-module-loader.

Gulpfile:

var gulp    = require('gulp');
var del     = require('del');
var shell   = require('gulp-shell');

gulp.task('clean', function(cb) {
  del('dist', cb);
});

gulp.task('default', ['clean'], shell.task([
  'jspm bundle-sfx app/main -o dist/app.js',
  './node_modules/.bin/uglifyjs dist/app.js -o dist/app.min.js',
  './node_modules/.bin/html-dist index.html --remove-all --minify --insert app.min.js -o dist/index.html'
]));

HTML:

<head>
    <title>ES6</title>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
        System.import('app/main');
    </script>
</head>

The repo I created here will also show you how to do it

edited Jun 01 '15 at 16:15

answered May 28 '15 at 19:42

30secondstosam

4,476
4
28
33

Whilst this may theoretically answer the question, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Evan Davis May 29 '15 at 17:27
I have done. But I'm not going to dump a whole repo of code into stackoverflow. I've stated using jspm and es6-module-loader. That's the essential parts @Mathletics – 30secondstosam May 31 '15 at 12:32
1

Sure, but if you remove the repo, then you have no answer. SO answers should be self contained. – Evan Davis Jun 01 '15 at 13:56

ES6 - Using babel/traceur with jQuery plugins

1 Answers1

Linked