These are chat archives for systemjs/systemjs

3rd
Jul 2015
johnman
@johnman
Jul 03 2015 09:48
Hi all, I'm currently just using SystemJs with npm (no jspm for now). I've got it loading packages (although I understand without jspm it won't browserify transform some dependencies that work in node and the browser), and I have it pulling in my own packages exported as commonjs as well as local files.
So after experimentation it's all good (although I do have some questions about the css loader for another time).
I am now looking to create a bundled file for some of my packages so that there is a lib option where the individual files will be individually imported or a dist option which contains a bundled file with all the files related to that package [excluding external dependencies])
I'm running systemjs builder and telling it to export as cjs, and not include the runtime
I load up config which has a path section which maps 'my-package-x' to e.g. /mycustompath/my-package-x/lib/index
johnman
@johnman
Jul 03 2015 09:54
if I want to exclude that external dependency I have to create a meta entry with {build: false}
I assumed I could do meta : { 'my-package-x':{build:false}} and it would not include the dependency in the built file
It doesn't seem to work that way.
I have to put meta {'/mycustompath/my-package-x/lib/index.js':{build:false}}
when it generates the bundle, the bundle contains require('/mycustompath/my-package-x/lib/index.js')
johnman
@johnman
Jul 03 2015 10:00
I would want it to remain require('my-package-x') so that I can then provide a SystemJs config that maps that dependency to a path rather than having the path used at time of build hardcoded.
Peter Müller
@Munter
Jul 03 2015 10:01
Maybe the bundle arithmetic part will help you https://github.com/systemjs/builder#bundle-arithmetic
johnman
@johnman
Jul 03 2015 10:01
So I want to reduce http requests for files within packages but still want to request packages via SystemJs
tried saying that on it's own before e.g. path/*/ but it still brought in the dependencies e.g. lodash for example
I could try creating a common bundle and tell it to exclude node_modules perhaps but I am guessing the generated require may still have the path rather than the module id e.g. 'my-package-x'
johnman
@johnman
Jul 03 2015 10:06
strangely enough I've been doing some investigation and if I create a bundle of my-package-x using webpack instead then I can import that via systemjs fine (so far, a package with no dependencies) and when I use systemjs builder on the a project that depends on my-project-x and I add the meta entry 'my-package-x': {build:false} it seems to keep the generated require as require('my-package-x')
Peter Müller
@Munter
Jul 03 2015 10:07
Isn't that the point? my-package-x is not a part of the build. If you ever hit a code path that needs it SystemJS will load it async at runtime
johnman
@johnman
Jul 03 2015 10:07
rather than require('pathto/my-package-X/etc)
Peter Müller
@Munter
Jul 03 2015 10:08
ah, maybe you are missing some configuration for systemjs. This is the part that just happens automatically with jspm
johnman
@johnman
Jul 03 2015 10:09
yep, so the point is I want it to remain require('my-package-x') in the bundled file so that it resolves that at runtime
and I just wanted to get that if I used systemjs builder with just the meta flag (i.e. don't include the js but also don't switch 'my-package-x' for the path)
Might be I am just configuring something wrong. But at the moment it looks like using SystemJs for dynamically pulling in dependencies and use webpack for packaging those dependencies (specifying commonjs output and excluding any external deps) might be a way to go
That's why I thought it best to ping others here who may have come across this
johnman
@johnman
Jul 03 2015 10:27
An additional thing I noticed was that an import for css changed in the bundled file and became: require('path/test.css!css.js') with .js added to the end. I'm not sure what effect that would have
Guy Bedford
@guybedford
Jul 03 2015 14:20
@Munter still travelling here, but keen to have that integration discussion
johnman
@johnman
Jul 03 2015 14:38
I believe I've figured out what was going wrong
In my bundle config I had paths but they didn't specify the .js at the end of the paths section. No errors are given but the file is included in the bundle e.g. paths: { "my-package-x" : "pathtonodemodules/my-package-x/index"} with a meta of {"my-package-x":{build:false}}
johnman
@johnman
Jul 03 2015 14:44
In my comments above you can see I tried to use the full path in the meta. Which works but then leaves the path in the bundle instead of require("my-package-x")
The reason the webpacked dependency worked that way was because it's path entry had .js at the end "my-package-x"
so just adding .js at the end of all the path entries meant that the meta entries work and the packages are excluded from the bundle
the css entry I mentioned still shows up because I have defaultJSExtensions: true, if I switch that off it would leave it as .css!css but the bundle fails because of imports that do not have a .js extension
I hope this helps someone
johnman
@johnman
Jul 03 2015 15:11
So I've now tried to use the bundle in my html page e.g. System.import('bundle.js').etc and it loads bundle.js but falls over on 'my-package-x' e.g. lodash....I am still including systemjs as a script tag.
I thought if it didn't exist in the bundle e.g. excluded it would fall back on systemjs and the browser systemjs config that maps require("my-package-x") to the defined path e.g. /libs/my-package-x/index
But it just checks the internal list of registered entries and throws an error. Expected behaviour?
thanks
Aviel Fedida
@avielfedida
Jul 03 2015 16:30
Is there a ready-to-use seed for using SystemJS with Typescript?
Micah Zoltu
@MicahZoltu
Jul 03 2015 17:09
I don't think so without coming with some framework as well.
For example, there is an Aurelia skeleton floating around that uses TypeScript.
You could pretty easily pull out the Aurelia stuff if you wanted.
Micah Zoltu
@MicahZoltu
Jul 03 2015 23:18
How do I make SystemJS fetch TypeScript files from the server instead of JS files? I am using JSPM@beta and it appears to be appending .js to fetches.
Micah Zoltu
@MicahZoltu
Jul 03 2015 23:26
While troubleshooting, I added the following and it appears to cause SystemJS to stop adding .js:
  "packages": {
    "jspm_packages": {
      "defaultExtension": "js",
    }
  }
My expectation was that anything in jspm_packages (and all subdirectories) would get .js added to requests.
Instead, everything in jspm_packages doesn't get .js added to requests.
@guybedford
Micah Zoltu
@MicahZoltu
Jul 03 2015 23:41
Hmmm... I'm not sure how to go about updating a package to work without the default JS extension.
For example, jspm install aurelia-bootstrapper won't work out of the box. If I add .js to the map item for it like "aurelia-bootstrapper": "github:aurelia/bootstrapper@0.14.0.js", then it will successfully load the first file but inside that file is a reference to index rather than index.js. I tried installing aurelia-bootstrapper with an override of main to index.js, but bootstrapper@0.14.0.js still had the extensionless index.js in it.
What is the expected migration strategy for moving to no default extension?