These are chat archives for systemjs/systemjs

21st
Nov 2018
Chris Beckett
@chrismbeckett_gitlab
Nov 21 2018 16:22

Hello everyone. Excited to see the new SystemJS 2.0 release and hoping it can work with Rollup.js to get me where I need to go. I used jspm.io a few years ago before moving to Webpack and the Rollup, and have been continuing to watch it to see it evolve with the new ES6 specs. Great work on the new version.

I am currently building an application using native web components and ES6 modules. I using Rollup to build a single application bundle, but I want to migrate to chunking my application into smaller pieces and loading dynamically. My blocker is that while I am only targeting browsers that support native web components (and coincidentally support static ES6 modules), dynamic ES6 module loading is not.

Step #1 seems to be to chain multiple Rollup configurations/builds to create my application modules and use defined externals to split out dependencies. I can target each bundle to the 'system' format to work nicely with SystemJS.

Step #2, introducing dynamic SystemJS module loading is where I am a bit confused. How do I manage ensuring I load dependencies when I dynamically load a module? I don't see in the package map where you define dependencies?

Any suggestions on tooling this workflow would be appreciated.

Guy Bedford
@guybedford
Nov 21 2018 18:24
@chrismbeckett_gitlab hey, if you're targetting ES modules directly, and don't need to support browsers without ES modules then you may be able to skip SystemJS and use ES module shims - http://npmjs.org/package/es-module-shims
this project basically makes dynamic import and package maps work in browsers with only baseline ES modules support
For the Rollup workflow, you could do manual builds in layers, but it could be tricky to manage
otherwise take a look at Rollup code splitting which is designed for this
Chris Beckett
@chrismbeckett_gitlab
Nov 21 2018 18:35
Thx @guybedford - you are right, I am only targeting ES modules, and just need dynamic import. I will take a look at the es-module-shims project. Thank you. As for the rollup code-splitting, I have looked at it, I guess I just don't understand it :)
Guy Bedford
@guybedford
Nov 21 2018 18:49
Rollup code splitting automatically outputs the minimal production graph to share code between entry points
So that no module is loaded twice but tree shaking applies for all usage of the modules
Chris Beckett
@chrismbeckett_gitlab
Nov 21 2018 18:53
@guybedford I appreciate you trying help me :) I still have no idea what that means. I have read the code splitting examples multiple times, I still don't understand what it adds, how it really works, or why I need it.
Scott
@ProtonScott
Nov 21 2018 19:37
I really like rollup
Is the system option that it outputs by default usable?
or is that the old spec?
(i find it a little confusing)
Guy Bedford
@guybedford
Nov 21 2018 19:58
@chrismbeckett_gitlab so most apps only need one file to run. They can be built from many modules to one file. But if you hvae an app with two separate pages that use different code, you want to still be able to share cached code between those pages, so Rollup code splitting optimizes based on "entry points". You provide the entry points - which are either separate module scripts loaded on pages, or dynamic imports, and it then gives you back a module for each of those entry points, where those modules then share "chunks" between them. You have effectively then an "optimized production module tree".
@ProtonScott yes, the system option from Rollup will work in all versions of SystemJS
Just run System.import('/path/to/file.js') and it will load the System module, then any chunk dependencies it has
(say if you are loading an entry point that has been code-split to have separate chunk dependencies)
Chris Beckett
@chrismbeckett_gitlab
Nov 21 2018 21:04
@guybedford Thank you for your help. I have es-module-shims working which is a big help. I will play around with Rollup code splitting and see if I can figure it out.
Guy Bedford
@guybedford
Nov 21 2018 22:11
sure, glad to hear it. I should probably mention the project in the SystemJS readme actually as it is becoming a more common use case to be able to do this