These are chat archives for systemjs/systemjs

28th
Apr 2016
Andrei Balmus
@abalmush
Apr 28 2016 08:04
Guys how can I tell SystemJS to load files with dynamic names, like this: main-dfb3549cb6.js, this prefix will be changed after each build.
Sharon (Sean) Rolel
@Mosho1
Apr 28 2016 08:13
@abalmush if it's a bundle, you can point your entry point to the generated file name as part of the build
in config.js
Andrei Balmus
@abalmush
Apr 28 2016 08:20
@Mosho1 thanks for answer, I have a bundle option in my config but is doesn’t work for some reasonce :worried: :
bundles: {
    "main-app": [
      "js/main.js"
    ],
    "checkout": [
      "js/checkout.js"
    ],
    "dist/main-dfb3549cb6": [
      "js/main"
    ],
    "dist/checkout-5fe9b946ac": [
      "js/app/checkout/BillingSection",
      "js/app/checkout/CheckoutApp",
      "js/app/checkout/SectionRenderer",
      "js/checkout"
    ]
  },
@Mosho1 could you please give me some example?
"dist/main-dfb3549cb6”: […] and "dist/checkout-5fe9b946ac”: […] generating automatically, after I run gulp build
Sharon (Sean) Rolel
@Mosho1
Apr 28 2016 09:57
@abalmush that looks fine to me, if all your modules resolve to those names
include the config, and see if the bundles are requested instead of the separate files
you can view the normalized module names with Object.keys(System._loader.modules)
Andrei Balmus
@abalmush
Apr 28 2016 10:28
@Mosho1 so if I include module like this: System.import('js/main'); it loads module from js/module.js and it is not bundled. and System._loader.module returns:
Object.keys(System._loader.modules)
["@empty", "@@global-helpers", "@@amd-helpers", "@system-env", "https://moet-uk.local:9002/_ui/js/main.js", "https://moet-uk.local:9002/_ui/js/bootstrapper.js", "https://moet-uk.local:9002/_ui/lib/npm/jquery@2.2.3.js", "https://moet-uk.local:9002/_ui/lib/npm/foundation-sites@6.2.1.js", "https://moet-uk.local:9002/_ui/lib/npm/jquery@2.2.3/dist/jquery.js", "https://moet-uk.local:9002/_ui/lib/npm/foundation-sites@6.2.1/dist/foundation.js”]
I think SystemJS do not understand that we have bundles in dist folder
Screen Shot 2016-04-28 at 12.52.26 PM.png
it should load these files
Sharon (Sean) Rolel
@Mosho1
Apr 28 2016 10:31
can you show me your config.js?
Andrei Balmus
@abalmush
Apr 28 2016 10:34
sure @Mosho1
System.config({
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system",
      "es7.decorators",
      "es7.classProperties"
    ]
  },
  paths: {
    "*": "*.js",
    "github:*": "lib/github/*",
    "npm:*": "lib/npm/*"
  },
  map: {

  },
  bundles: {
    "dist/checkout-5fe9b946ac": [
      "js/app/checkout/BillingSection",
      "js/app/checkout/CheckoutApp",
      "js/app/checkout/SectionRenderer",
      "js/checkout"
    ],
    "dist/main-3f677ffa28": [
      "js/bootstrapper",
      "js/main",
      "npm:foundation-sites@6.2.1.js",
      "npm:foundation-sites@6.2.1/dist/foundation.js",
      "npm:jquery@2.2.3.js",
      "npm:jquery@2.2.3/dist/jquery.js"
    ]
  }
});
Andrei Balmus
@abalmush
Apr 28 2016 10:43
Looks like I have to create some manifest file and use it with SystemJS, to be able to map js/main -> dist/main-3f677ffa28 is’n it?
Guy Bedford
@guybedford
Apr 28 2016 11:48
@abalmush having custom bundle names isn't a problem, it sounds like the issue is ensuring the bundle is loaded at the right time, which is just about the naming process. I'd suggest removing the "*": "*.js" path as that may be conflating the normalization algorithm and is not needed when defaultJSExtensions is set to true
Another thing to check is to log System.bundles['dist/checkout-5fe9b946ac after running System.config and ensure that it has normalized all the names correctly
That's where those names need to match the registry names, it's just mismatching that causes the out-of-bundle loading
Andrei Balmus
@abalmush
Apr 28 2016 11:52
thank you @guybedford, let me try this
Andrei Balmus
@abalmush
Apr 28 2016 12:00
@guybedford, console.log(System.bundles); returns:
Object {dist/checkout-edc7162fec.js: Array[4], dist/main-5566390d1e.js: Array[6]}
dist/checkout-edc7162fec.js
0:"https://moet-uk.local:9002/en_GB/js/app/checkout/BillingSection.js"
1:"https://moet-uk.local:9002/en_GB/js/app/checkout/CheckoutApp.js"
2:"https://moet-uk.local:9002/en_GB/js/app/checkout/SectionRenderer.js"
3:"https://moet-uk.local:9002/en_GB/js/checkout.js"
length
:
4
__proto__
:
Array[0]
dist/main-5566390d1e.js
:
Array[6]
0
:
"https://moet-uk.local:9002/en_GB/js/bootstrapper.js"
1
:
"https://moet-uk.local:9002/en_GB/js/main.js"
2
:
"https://moet-uk.local:9002/en_GB/lib/npm/foundation-sites@6.2.1.js"
3
:
"https://moet-uk.local:9002/en_GB/lib/npm/foundation-sites@6.2.1/dist/foundation.js"
4
:
"https://moet-uk.local:9002/en_GB/lib/npm/jquery@2.2.3.js"
5
:
"https://moet-uk.local:9002/en_GB/lib/npm/jquery@2.2.3/dist/jquery.js"
length
:
6
__proto__
:
Array[0]
__proto__
:
Object
Guy Bedford
@guybedford
Apr 28 2016 12:01
And is https://moet-uk.local:9002/en_GB/js/main.js the right path then?
The other thing to compare is the names inside the bundle itself at dist/main-....js
Andrei Balmus
@abalmush
Apr 28 2016 12:01
yes thi is compiled version not bundled version
Guy Bedford
@guybedford
Apr 28 2016 12:02
and ensure they will normalize into en_GB/js/main.js
System.register('js/main', ...)
should be present
when run that will define into System.defined['https://...'] which can be verified to match the bundles config values
So after the bundle is included, Object.keys(System.defined) need to match the names in System.bundles.
Andrei Balmus
@abalmush
Apr 28 2016 12:06
@guybedford yeh I have something like this in bundle file:
System.register("js/bootstrapper.js",["jquery","foundation"],function(a,b){function c(){d(document).foundation()}var d;return a("default",c),{setters:[function(a){d=a["default"]},function(a){}],execute:function(){}}}),System.register("js/main.js",["./bootstrapper"],function(a,b){function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d,e;return{setters:[function(a){d=a["default"]}],execute:function(
System.register("js/main.js",["./bootstrapper”] … is also present
Andrei Balmus
@abalmush
Apr 28 2016 12:26
Screen Shot 2016-04-28 at 3.25.34 PM.png
looks like difference is only en-GBbut it should point to the same base folder
Sharon (Sean) Rolel
@Mosho1
Apr 28 2016 13:39
@abalmush did you try removing "*": "*.js"
Andrei Balmus
@abalmush
Apr 28 2016 13:41
@Mosho1 yes I removed it
Guy Bedford
@guybedford
Apr 28 2016 14:56
@abalmush so the difference is that the bundle is being normalized with a baseURL of _ui while the bundles config has a en_GB baseURL normalization
that's exactly the mismatch
Andrei Balmus
@abalmush
Apr 28 2016 15:03
@guybedford is it possible to fix this somehow using JSPM ? cause the server adds this en_GB by default
aslo if I use exact name like this System.import('js/main-e190ab5312.js'); looks like th ebundle is loaded but not executed
I mean I have some console.log() in my code and it wont work
if I do System.import('js/main’); i can see message logged in the console
Guy Bedford
@guybedford
Apr 28 2016 17:25
I'm not sure I follow what you mean 'adds by default'! I'd advise carefully checking the meaning of the baseURL in systemjs