jspm bundle to AMD/CJS

[OliverJAsh]

Is this possible?

[guybedford]

It might be - we'd lose circular reference support.

What sort of use cases are you thinking of?

[guybedford]

Another thing I've been meaning to consider as well is self-contained bundles that run themselves.

[OliverJAsh]

We currently distribute Scribe as a bundled file containing all the necessary AMD modules (created using the r.js optimizer). AMD consumers of our library are therefore catered for, and we have a rather hacky workflow for Browserify (CJS) users, whereby they can import Scribe by running deamdify as a global transform.

We are now thinking of moving Scribe to using jspm because we need to depend on libraries which do not share our module format. E.g. we want to depend on virtual-dom which is written in CommonJS, but we're currently using AMD. As you know, there's no easy way to import CommonJS into AMD without some conversion and a lot of RequireJS config (paths/packages).

We're happy to move the Scribe source files to ES6, but we will still need to distribute the library as AMD and CJS because that's what the majority of our users are using.

AFAIK, jspm bundle will current only output modules under System.register. Would it be reasonable to bundle to AMD or CJS, similar to how Traceur allows you to specify a format?

[guybedford]

This is quite important for portability I agree.

We are working hard on this use case, I'm hoping to have something in the next month.

[OliverJAsh]

Great! Is there anywhere I can track the discussion/implementation?

[guybedford]

Sure, I'm trying to see if we can collaborate on something here - caridy/es6-micro-loader#2.

[guybedford]

I actually made some unexpected progress on these self-contained bundles. I expect we can have an initial unstable version of this in the release coming next week.

[shanesizer-wf]

Could it emit as UMD (universal module definition)? -> https://github.com/umdjs/umd

[guybedford]

UMD is not suitable for a combined output since all module formats have circular references behaving differently. This will thus introduce edge case issues. Feel free to do your own transpilation process if you know this will work for your cases though, but we're solving the problem a bit more generally here.

[guybedford]

I don't think we will support bundling into formats other than System.register due to the nature of the module format interactions.

I may be wrong though so feel free to continue the discussion.

[mitar]

BTW, one can always ask upstream project to add hooks to include in other ways. They could make code check for existence of various loaders and use that.

[djindjic]

@guybedford is it still actual information that we cant bundle es6 code to amd using jspm? I have same issue as @OliverJAsh, want to "export" it as amd to use in an existing requirejs app.

[guybedford]

@djindjic jspm doesn't provide this functionality but other tools like Babel can do this for you (http://babeljs.io/docs/usage/modules/)

[djindjic]

thanks @guybedford. It seems there is no way to use both jspm and babel's features. For example, I really love jspm's format agnostic imports, and workflow with systemjs plugins, but now I am working on angular 1/.x directives library and want to export it as an amd module or global object bundle and allow users to include it in their existing apps without package managers while I still want to use jspm install for third party libs in my directives library.

[guybedford]

There main workflow for this use case currently it to compile ES6 to CJS if
used and publish to npm.

Alternatively if you're happy to build in your dependencies use an SFX
bundle.

You can write SFX bundles that have global adapters that check for the
globals on the window object as well to remove large dependencies this way
too.

On Tue, Mar 24, 2015 at 8:54 AM Aleksandar Djindjic <
[email protected]> wrote:

thanks @guybedford https://github.com/guybedford. It seems there is no
way to use both jspm and babel's features. For example, I really love
jspm's format agnostic imports, and workflow with systemjs plugins, but now
I am working on angular 1/.x directives library and want to export it as
amd module or global object and allow users to include it in their existing
apps without package managers while still using jspm install for third
party libs in my new library.

Reply to this email directly or view it on GitHub
#75 (comment).

[djindjic]

SFX bundle sounds like it might help me. Until now I have use it just like this:

jspm bundle-sfx app/main app.js

Are global adapters custom code which I need to write into compiled sfx bundle after jspm-cli command?

[guybedford]

Yes, you would basically write:

adapters/jquery.js
export default window.jQuery;

And then add a map:

System.config({
map: {
"jquery": "adapters/jquery"
}
});

On Tue, Mar 24, 2015 at 1:35 PM Aleksandar Djindjic <
[email protected]> wrote:

SFX bundle sounds like it might help me. Until now I have use it just like
this:

jspm bundle-sfx app/main app.js

Are global adapters custom code which I need to write into compiled sfx
bundle after jspm-cli command?

Reply to this email directly or view it on GitHub
#75 (comment).

[djindjic]

once again, WOW + THANKS! looks so logical when somebody show you how 😄. that's fine, and by my opinion it is cleaner then npm-CJS in case of browser usage. You made my day because I was totally sure that I will have to use bower and es5 again (and sedatives 💊) 😃