Simple Babel transpiled es6 Module Loading

Question

I'm looking for simple module loading for import/export es6 modules transpiled by babel.

Start with es6 source files with import/export modules for use in the browser
Statically transpile this to es5 with babel, with a config specifying whichever module transform (amd, commonjs, systemjs) is simplest to load.
Do not use npm for the modules, nor any other complex workflow. Just babel transpiled files.
Load these es5 files with modules, with a <script> to load a library that the babel transpilation used for loading es6 modules.

I'd like to avoid browserify, webpack, jspm etc. Just simple transpiled es6->es5 and using the library babel compiled modules to. I don't need bundling. We're talking simple, basic javascript here.

Is this possible? If so, how?!

All the module loading discussions I've seen use complex workflows that seem to me to be unnecessary. I'd like to simply use es6 import/export in a set of files and use them as simply as possible in the browser.

Sounds like you're looking for transpiling to AMD and then using a client-side library like require.js. — Bergi
If you want to use ES6 import/export syntax, you need some kind of module loader. RequireJS will work, but I'm really not sure what you gain using that over other approaches. If anything, I'd consider AMD more complex than Browserify. I'd generally consider "simple transpiled es6->es5" to be at odds with "simply use es6 import/export". — loganfsmyth
You could use babel-global-variables. The very definition of simple but discards a lot of the advantages of ES6 module loading...But then again I agree with loganfsmyth, Browserify is crazy simple - it's one single CLI command — CodingIntrigue
OP here. Embarrassed to say that I don't know how to use browserify for module loading! I don't use it in my general (gulp) workflows. It was my understanding that it was used to convert an npm repo to browser use. Got a simple gulp task that might do the trick? — backspaces

backspaces backspaces · Accepted Answer · 2016-01-05T17:15:39

Guy Bedford answered this in the SystemJS Google Group: https://groups.google.com/forum/?hl=en#!topic/systemjs/a7vB2YmdXp8

Here is a talk I gave on it to my team, the details are at the end: http://backspaces.net/temp/Modules.pdf

The short version is: configure babel to have babel-plugin-transform-es2015-modules-systemjs, run your modules thru babel with just this transform unless you need more of the es6 features (Chrome is 91% complete), and have your html include:

<script src="system.js"></script>
and
<script>
  System.import('lib/main'); 
</script>

No webpack, npm/browserify, jspm, bundling, ... or any other of the (far too) many module workflows.

Simple Babel transpiled es6 Module Loading

2 Answers