These are chat archives for systemjs/systemjs

22nd
Apr 2015
Mike Haas
@mikehaas763
Apr 22 2015 00:57
Ok so I see all this talk about using global deps but I just can't figure it out. I already have some scripts that are loaded not via systemjs. Those scripts create globals that obviously will work from within my ES6/System.register modules. Is it possible to shim a global in a way so that I can import from my ES6 modules so that my tooling doesn't warn me about using globals? Also, so that if/when I ever switch these deps to modules that can be loaded from systemjs I won't have to modify all my own modules
So for example (yes I do know angular has a package on npm) I would like to do import angular from './vendor/angular';
Igor
@PinkaminaDianePie
Apr 22 2015 08:00
how can i import already compilled files without runtime transpillers (under nodejs)?
Sharon (Sean) Rolel
@Mosho1
Apr 22 2015 12:13
:point_up: April 22 2015 3:57 AM Try adding "exports <module-name>"; to the global script, then importing it.
For example:
"format global"; "exports angular";
And in your module:
import angular from 'angular'
Mike Haas
@mikehaas763
Apr 22 2015 12:15
@Mosho1 the global script is an external dependency. I can't modify it.
Sharon (Sean) Rolel
@Mosho1
Apr 22 2015 12:16
Maybe an exports configuration also works
that's what you need
Mike Haas
@mikehaas763
Apr 22 2015 12:18
@guilhermeaiolfi ya I read that and made some attempts but that documentation does not make sense
Sharon (Sean) Rolel
@Mosho1
Apr 22 2015 12:19
@guilhermeaiolfi this works for me:
meta: {
    "bower_components/angular/angular": {
       format: 'global',
       exports: 'angular'
   },
}
Guilherme Aiolfi
@guilhermeaiolfi
Apr 22 2015 12:20
I've not tested it, but it seems that it would work without it
Sharon (Sean) Rolel
@Mosho1
Apr 22 2015 12:21
it doesn't
perhaps I'm missing something though
Guilherme Aiolfi
@guilhermeaiolfi
Apr 22 2015 12:22
the docs are lying!!
Mike Haas
@mikehaas763
Apr 22 2015 12:23
uh oh
Guilherme Aiolfi
@guilhermeaiolfi
Apr 22 2015 12:25
Sharon (Sean) Rolel
@Mosho1
Apr 22 2015 12:26
that works for me
but if I try to import angular from 'angular' it doesn't
unless I use System.import first
which isn't very consequential I admit
Mike Haas
@mikehaas763
Apr 22 2015 12:28
What exactly is "github:angular/bower-angular@1.2.16" ?
Sharon (Sean) Rolel
@Mosho1
Apr 22 2015 12:28
jspm mapping of a module to a GH repo
Guilherme Aiolfi
@guilhermeaiolfi
Apr 22 2015 12:30
does import angular from 'angular' request something at least?
in your network tab
Sharon (Sean) Rolel
@Mosho1
Apr 22 2015 12:30
sec
nope
Mike Haas
@mikehaas763
Apr 22 2015 12:31
Any idea how it works if you're not using jspm (and don't want to)?
Sharon (Sean) Rolel
@Mosho1
Apr 22 2015 12:31
@mikehaas763 yeah, I don't use it right now either
you download the scripts to a folder in your app as you normally would, and apply the mapping
System.config({
   map: {
      'json': 'bower_components/systemjs/plugins/json',
      'angular': "bower_components/angular/angular",
      'd3': "bower_components/d3/d3"
},
Guilherme Aiolfi
@guilhermeaiolfi
Apr 22 2015 12:33
yeah, it's just an abstraction to a path: "github:*": "jspm_packages/github/*.js",
if you copy manually, just use the path you already have
Mike Haas
@mikehaas763
Apr 22 2015 12:34
So then systemjs actually makes the request to "bower_components/angular/angular.js" ?
Sharon (Sean) Rolel
@Mosho1
Apr 22 2015 12:35
you use jspm install and it downloads the scripts
if it's from github, it goes to a github folder, same for npm
and like @guilhermeaiolfi stated, the github: notation tells it where to go within jspm_packages
that configuration also happens when you use jspm install, as well as other stuff like resolving dependencies
Mike Haas
@mikehaas763
Apr 22 2015 12:36
What if you can't use jspm
Sharon (Sean) Rolel
@Mosho1
Apr 22 2015 12:36
it's very useful, I'll switch to it at some point
you don't have to use it
just state the mappings and dependencies yourself
Mike Haas
@mikehaas763
Apr 22 2015 12:37
Ok that's what I thought you were saying originally
So if I have a mapping "angular": "bower_components/angular/angular" then do an import angular from 'angular'; systemjs will retrieve the script located at "bower_components/angular/angular.js" correct?
Sharon (Sean) Rolel
@Mosho1
Apr 22 2015 12:39
yes
but it would seems you have to either use System.import('angular') first or add the exports: 'angular' meta config first
Mike Haas
@mikehaas763
Apr 22 2015 12:41
Any idea how to handle global dependencies that have global dependencies? For example, I need to load angular first, then angular-cookies, angular-mocks, ng-cordova etc.
Sharon (Sean) Rolel
@Mosho1
Apr 22 2015 12:45
it's the same as with modules
afaik
Guilherme Aiolfi
@guilhermeaiolfi
Apr 22 2015 12:45
System.meta['bower_components/angular/angular'] = {
format: 'global',
deps: ['bacon']
};
Sharon (Sean) Rolel
@Mosho1
Apr 22 2015 12:45
^
Mike Haas
@mikehaas763
Apr 22 2015 12:46
Hmm, ok I'm going to try and piece that together
Guilherme Aiolfi
@guilhermeaiolfi
Apr 22 2015 12:50
isn't SystemJS great? :)
Mike Haas
@mikehaas763
Apr 22 2015 12:51
Ha, it really is the documentation is just hurting
Guilherme Aiolfi
@guilhermeaiolfi
Apr 22 2015 12:53
yeah, I'm frequently searching for examples in github issues b/c the docs are very superficial
Mike Haas
@mikehaas763
Apr 22 2015 12:57

Hmm.
I have

System.config({
            map: {
                'angular': 'lib/ionic/js/ionic.bundle.js'
            }
        });

but when I do import angular from './angular'; a request is made relative to where the import is ./angular.js

Looks like I needed 'angular': 'lib/ionic/js/ionic.bundle' and import angular from 'angular';
Guilherme Aiolfi
@guilhermeaiolfi
Apr 22 2015 13:01
yes, ./angular is a relative path, same as ../ for looking at the parent folder
Mike Haas
@mikehaas763
Apr 22 2015 13:07
Odd, when I'm debuging the system module angular in my import contains the string "ui.router". ionic.bundle.js contains angular, ui-router and ionic itself
Igor
@PinkaminaDianePie
Apr 22 2015 13:09
hey, may be can help me with my question? how can i import already compilled module?
Mike Haas
@mikehaas763
Apr 22 2015 13:10
@PinkaminaDianePie already compiled to what?
Igor
@PinkaminaDianePie
Apr 22 2015 13:10
@mikehaas763 to es5/commonjs
Mike Haas
@mikehaas763
Apr 22 2015 13:12
I think you can just do something like
<script src="es6-module-loader.js"></script>
<script src="system.js"></script>
System.import('your/app/main');
Igor
@PinkaminaDianePie
Apr 22 2015 13:13
@mikehaas763 under nodejs
@mikehaas763 and if i doing System.import('your/app/main'); - systemjs tries to compile main second time
it takes ~700ms under node to load one module with 7 lines
Mike Haas
@mikehaas763
Apr 22 2015 13:17
Hmm, I don't use node often but if you're compiling ES6 modules down to cjs modules then you probably don't need systemjs right?
Sharon (Sean) Rolel
@Mosho1
Apr 22 2015 13:20
hmm, now I have a problem with global deps
'bower_components/angular-cookies/angular-cookies': {
  deps: ['angular']
},
it is loaded before angular
Igor
@PinkaminaDianePie
Apr 22 2015 13:21
@mikehaas763 i need it only for System.import()
i dont want to write own polyfill based on promises and node's require()
Mike Haas
@mikehaas763
Apr 22 2015 13:32
I think maybe shims can be used to say that a script exports certain globals https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#shim-configuration
Sharon (Sean) Rolel
@Mosho1
Apr 22 2015 13:36
scratch that, my bad, everything works
Marjan Georgiev
@marjan-georgiev
Apr 22 2015 16:47
Hi all! Is it possible to load AMD modules if I pass modules: 'system' and moduleIds: false to my babel compiler options?
Guilherme Aiolfi
@guilhermeaiolfi
Apr 22 2015 16:57
you can load them without doing that
it will automatically recognize it's a AMD module
Marjan Georgiev
@marjan-georgiev
Apr 22 2015 17:15
what if I have to do that?