These are chat archives for systemjs/systemjs

14th
Dec 2016
Benedikt Berger
@bergben
Dec 14 2016 14:40
Hey guys! I have never used systemjs before and don't quite understand the need for it. Like what does it do? I have used angular2-meteor before and there it wasn't needed obviously, maybe due to the building process? Now however I would like to use angular2 with .net mvc 5 and all the articles I find are suggesting to use systemjs. Can someone explain me why? I think I am lacking some fundamental understanding here
Joel Denning
@joeldenning
Dec 14 2016 16:03
@bergben There are definitely a lot of ways to answer that question, but here are a few reasons for SystemJS:
  • Instead of <script> tags for each javascript file, you can create bundles that contain all of your files in one
  • You can use ES6 import even though it is not supported by any browser
  • You can compile code from ES6 -> ES5, typescript -> ES5, etc. And the compilation can be done either during a build process or can be done on-the-fly in the browser.
  • SystemJS is a true module loader, which is what browsers will support in the future for loading ES6 modules. This is not true of webpack, which is only a static build-time tool which doesn’t support dynamic runtime loading. See https://github.com/ModuleLoader/es-module-loader and https://github.com/whatwg/loader for more details
There’s a lot more that could be said, for sure, but hopefully that gives you an overview.
Benedikt Berger
@bergben
Dec 14 2016 16:07
@joeldenning thanks for the explanation there. I saw many people talk about systemjs being the module loader for the future so now I know why. Dynamic runtime loading is useful for lazy loading I suppose?
I am sorry I am really a noob regarding bundling, module loading and stuff like this.
Joel Denning
@joeldenning
Dec 14 2016 16:08
That’s a great question. So the concept of a “module loader” is something that originally was part of ES2015/ES6, but then got pushed out into a different specification because they wanted to release the ES6 spec without waiting on the module loading spec.
The purpose of a module loader, from a high level, is to turn the import string into a url, download the code, execute the code, and then let other modules use it.
So for example, in ES6 we can now do import lodash from ‘lodash’
But how do you load lodash in the browser?
Eventually that needs to turn into a URL so that you can download lodash from somewhere
The syntax for ES6 imports was finalized with ES6 (ie import lodash from ‘lodash’), but the mechanics of how browsers, nodejs, and 3p libs should actually do it was left out of ES6
Benedikt Berger
@bergben
Dec 14 2016 16:12
So meteor essentially has it's own module loader probably built in somehow in the building process. Otherwise I wouldn't be able to do the import statements? Or may it be part of TypeScript?
Thank you so much for explaining all this, I greatly appreciate this! @joeldenning
Joel Denning
@joeldenning
Dec 14 2016 16:13
You’re absolutely right — typescript itself compiles down import statements into ES5 code.
Benedikt Berger
@bergben
Dec 14 2016 16:14
Oh ok. Well I would be using Angular 2 with TypeScript, so systemJS would just be a cleaner way to load modules other than with TS?
Joel Denning
@joeldenning
Dec 14 2016 16:14
However, if you want to execute a ES6 module in the browser, typescript can’t do that
Benedikt Berger
@bergben
Dec 14 2016 16:14
ooooh
Joel Denning
@joeldenning
Dec 14 2016 16:14
Typescript’s support for ES6 modules is only a build-time thing, it doesn’t make it so the browser understands ES6 modules.
Benedikt Berger
@bergben
Dec 14 2016 16:15
ok I think now I get it. TS does it only for compilation, systemJS brings me browser support
Joel Denning
@joeldenning
Dec 14 2016 16:15
:thumbsup:
Benedikt Berger
@bergben
Dec 14 2016 16:15
thanks man!
Joel Denning
@joeldenning
Dec 14 2016 16:16
No problem! Hope that systemjs works out for you.
I think it is safe to say that the SystemJS documentation / website / resources are lacking, so if you run into problems feel free to ask.
Benedikt Berger
@bergben
Dec 14 2016 16:19
May I bother you with yet another thing then... Maybe a bit off-topic for this gitter but you seem to know your way around this things...
I use npm in combination with that, which installs me the packages. I then use systemJS to load the modules. How about bundling the node_modules? Like I want to combine .NET MVC 5 with angular 2 TS, but I don't want that node.js and npm has to be installed on the server to do npm install on deployment. Neither I want to add node_modules to the git repo as that is really dirty I think. So I would like to bundle the node_modules folder into some file... What would you use for that? And does systemJS then still work the same way?
Or maybe there even is another way than bundling what do I know
:worried:
Joel Denning
@joeldenning
Dec 14 2016 16:45
Good question @bergben - for your build/deploy situation, if you’re wanting to avoid having node/npm installed on your server and you also don’t want to put node_modules/jspm_packages into your git repo, then you could just commit the bundle file into your repo. Once you have created the bundle, you no longer need node/npm/jspm/node_modules/jspm_packages
Joel Denning
@joeldenning
Dec 14 2016 16:56
As for being able to load node_modules with SystemJS, that is something that I have never done before, but I think other people do. What a lot of people do, instead, though, is to use jspm and jspm_packages because that configures SystemJS to know how load everything correctly
The reason why SystemJS doesn’t automatically use node_modules is because nodejs code is written with commonjs modules (require() instead of import). SystemJS needs to know all of the dependencies of a module before it executes the module, but code that uses require() makes it hard to know upfront what the dependencies of the module are since you can call require() dynamically.
So what SystemJS does when it finds a commonjs module is that it searches the module for all of the calls to require so that it can find all of the dependencies before it executes the module.
Joel Denning
@joeldenning
Dec 14 2016 17:02
One thing that jspm provides is that when a commonjs module has dynamic usage of require (something like require(‘./‘ + pluginName + ‘.js’)), the community can add some configuration to work around that, which then everybody who uses JSPM benefits from that.
Anyway, that might be a longer explanation than what you were looking for, let me know if that doesn’t make sense
Benedikt Berger
@bergben
Dec 14 2016 17:23
I see. Thanks, it's a long explanation but a good one. I'll just go ahead and try something ,thanks for now :smile:
Benedikt Berger
@bergben
Dec 14 2016 18:19
:sparkles: weeeew I actually got it running, using system.js now. Thanks for helping me get started so much @joeldenning
Nick George
@Izzmo
Dec 14 2016 18:20
Congrats!
Joel Denning
@joeldenning
Dec 14 2016 18:20
Nice!
Benedikt Berger
@bergben
Dec 14 2016 18:47

I still got the problem with node_modules though. Someone suggested using tree-shaking and http://rollupjs.org/ is the first thing I found regarding that. Seems like jspm uses this for bundling, so I was hoping someone of you might know something about it again :smile:
Let's say I bundle everything in my node_modules to a myBundle.js. As far as I understood, I would have to tell systemjs then to look inside that bundle for my modules?
Currently the configuration looks like this though:

  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: '../Scripts/App',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      [...]

So every module has its own mapping. But for me all the modules would be in one file then, so the whole systemjs wouldn't make any sense anymore as I would have to load the whole file anyway?

Or better asked, could I even tell systemjs to look for all the modules in one single file
Benedikt Berger
@bergben
Dec 14 2016 20:32
I actually got it running using rollupjs, although then systemjs is indeed unneccessary. But I am ok with this for now, works great. I am quite sure I will get to use systemjs in the near future. Best regards until then @joeldenning ;)
oh actually i will still be using it for development hahah
Joel Denning
@joeldenning
Dec 14 2016 20:56
:thumbsup: glad you found something that works for you