0

I'm working on react project using jspm 0.17-beta.32 .

The application is composed of multiple packages (defined in jspm.config file).
I want each package to be bundled independently, as static builds, and to export its value inside a same global namespace.

For that I'm using the following command:

jspm build "<name>" build/<name>.js 
    --format umd 
    --externals react react-dom 
    --global-deps '{"react":"React","react-dom":"ReactDOM"}' 
    --global-name myGlobal 
    --minify 
    --production

And in my code:

// inside src/<name>/index.js
import React from 'react';
import MainComponent from '<name>/components/MainComponent.jsx';

export const <name> = { MainComponent };

Where <name> is the name of my package.

The problem is that if I include two bundles, the last one everrides the first one.

So if I change the global to export to myGlobal.<name> in my command, and change the exports inside js files to:

// inside src/<name>/index.js
import React from 'react';
import MainComponent from '<name>/components/MainComponent.jsx';

export default MainComponent;

Then in my html file the console logs an error saying: myGlobal is not defined.

So I've looked inside the static build file, and it basically do this.

// inside build/<name>.js
(
  ...
  factory function here, tracking dependencies
  ...
)(function(factory) {
  if (typeof define == 'function' && define.amd)
    define(["react-dom","react"], factory);
  else if (typeof module == 'object' && module.exports && typeof require == 'function')
    module.exports = factory(require("react-dom"), require("react"));
  else
    myGlobal.<name> = factory(ReactDOM, React);
});

That explains why the value of the myGlobal was overriden the first time, and why i get this error now, because it's never declared.

  • Is there a way to have nested globals using systemJs ?
  • Is there something I could do to ensure that myGlobal is instanciated if not declared yet, when using umd format ?

github issue here: https://github.com/jspm/jspm-cli/issues/2254

GBL
  • 386
  • 4
  • 13
  • Perhaps you could add `` before inserting your module script tags – ffflabs Mar 29 '17 at 22:06
  • that's what I ended up doing... but it doesn't seem like a very robust solution. What if i need to dynamically and conditionally load one bundle ? Do I need to track which script I've been loading from startup now ? I feel like when bundling a package to umd, this should be taken care of. Unfortunately I didn't have the time to look into this... – GBL Apr 03 '17 at 01:04
  • 1
    It depends. If you want to break up your app into semi-independent modules, but still engage in module merging while loading a subset of them, somewhere you need to declare their common namespace into the global scope, either explicitly or as a global dependency for the submodules. This idea was discussed in Typescript's repo a year ago and [it can be done, but it's discouraged](https://github.com/Microsoft/TypeScript/issues/7125). I don't know about specific jspm support for `namespace` module export. – ffflabs Apr 03 '17 at 18:40
  • 1
    I left you some of my conclusions on [the issue you filed](https://github.com/jspm/jspm-cli/issues/2254). Basically, what you want can be done, as long as all your components are in ES6 syntax. Othewise, the global object will get redefined over and over with each loaded module. – ffflabs Apr 03 '17 at 20:58

0 Answers0