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 usingumd
format ?
github issue here: https://github.com/jspm/jspm-cli/issues/2254