Simplest SystemJS Workflow

316 views
Skip to first unread message

Owen Densmore

unread,
Dec 16, 2015, 10:28:55 PM12/16/15
to SystemJS
I would like to use systemjs as my module loader for statically babel transpiled es6 modules (import/export), and in the simplest way possible.

No jspm, browserify, webpack, etc. No bundling. No unnecessary workflow. Just basic es6 with modules. With canary, I don't need babel to do little more than module handling.

Think "The Old Days" where JavaScript in the browser needed only its dependencies in <script>s. Now I want just import/export.

My hope is that by setting the right babel configuration, the transpiled files can work with only systemjs in a <script> within the browser, with possibly a polyfill or two.

Is this possible? Or are modules so broken still that we have to use more than that? .. webpack, npm/browserify/babelify, jspm?

I may be asking this question awkwardly, or with the wrong assumptions. But I know you can see what I'm looking for: module loading with minimal extra libraries/polyfills. Just .js files with minimal dependencies on <script> provided resources.


Guy Bedford

unread,
Dec 17, 2015, 5:21:15 AM12/17/15
to Owen Densmore, SystemJS
Yes this is a core use case of SystemJS.

With Babel, compile modules with the `system` module format (https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-systemjs) into separate files, and SystemJS will load those files correctly.

Nice boilerplate workflows here are always welcome to help new users.

--
You received this message because you are subscribed to the Google Groups "SystemJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to systemjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Owen Densmore

unread,
Jan 5, 2016, 12:42:34 PM1/5/16
to Guy Bedford, SystemJS
On Thu, Dec 17, 2015 at 3:21 AM, Guy Bedford <guybe...@gmail.com> wrote:
Yes this is a core use case of SystemJS.

With Babel, compile modules with the `system` module format (https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-systemjs) into separate files, and SystemJS will load those files correctly.

Nice boilerplate workflows here are always welcome to help new users.

​Worked beautifully, thanks. I wrote up my notes for a talk to my group:

I could write a short gist or post here with more details if you'd like.

Another thing: ​Axel Rauschmayer suggested a babel preset like es2015 but without including a module style, i.e. leave out the default commonjs. This means folks can use a preset plus the systemjs transform if they want a simple complete compile to es5 as well as modules. See tweet:


Bartekus

As per Axel's sugestion es2015-native-modules has been created so you can simply 
> npm install --save-dev es2015-native-modules


Reply all
Reply to author
Forward
0 new messages