Menu
When I install the css plugin, using the following command:
jspm install css
The following is added to my config.js:
System.config({
"map": {
"css": "github:systemjs/[email protected]",
"github:jspm/[email protected]": {
"assert": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"buffer": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"events-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"Base64": "npm:[email protected]",
"events": "github:jspm/[email protected]",
"inherits": "npm:[email protected]",
"stream": "github:jspm/[email protected]",
"url": "github:jspm/[email protected]",
"util": "github:jspm/[email protected]"
},
"github:jspm/[email protected]": {
"https-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"os-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"path-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"process": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"stream-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"url": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"util": "npm:[email protected]"
},
"github:systemjs/[email protected]": {
"clean-css": "npm:[email protected]",
"fs": "github:jspm/[email protected]",
"path": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]",
"module": "github:jspm/[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"util": "npm:[email protected]"
},
"npm:[email protected]": {
"base64-js": "npm:[email protected]",
"ieee754": "npm:[email protected]",
"is-array": "npm:[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]",
"commander": "npm:[email protected]",
"fs": "github:jspm/[email protected]",
"http": "github:jspm/[email protected]",
"https": "github:jspm/[email protected]",
"os": "github:jspm/[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]",
"source-map": "npm:[email protected]",
"url": "github:jspm/[email protected]",
"util": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"child_process": "github:jspm/[email protected]",
"events": "github:jspm/[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"http": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"util": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"os": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]",
"core-util-is": "npm:[email protected]",
"events": "github:jspm/[email protected]",
"inherits": "npm:[email protected]",
"isarray": "npm:[email protected]",
"process": "github:jspm/[email protected]",
"stream": "npm:[email protected]",
"string_decoder": "npm:[email protected]",
"util": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"amdefine": "npm:[email protected]",
"fs": "github:jspm/[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"events": "github:jspm/[email protected]",
"inherits": "npm:[email protected]",
"readable-stream": "npm:[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"assert": "github:jspm/[email protected]",
"punycode": "npm:[email protected]",
"querystring": "npm:[email protected]",
"util": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"inherits": "npm:[email protected]",
"process": "github:jspm/[email protected]"
}
}
});
How can I keep my config.js tidy in order to avoid including all this all this info in all my pages (since config.js needs to be included in every page)?
471
I'm new to JSPM too and had a similar reaction about the large config.js sizes, but here's a few things I've learned:
1) I wouldn't use JSPM for Node modules that you only want to use on the server side / development machine. You can just continue to use NPM for those. I made this mistake - thinking that I should use JSPM for all dependencies, replacing both Bower and NPM. I installed gulp through JSPM and my config.js was suddenly over 700 lines long!
2) I wondered if it was possible to configure it to just record the top-level dependencies - like in package.json - not all the dependencies of dependencies... It doesn't sound like it. I asked in the Gitter group and the response was: "Big as it is, it gives you control over peer dependencies that you don't have in npm". (Thanks Mitranim).
3) If you're familiar with require.js, you can think of your config.js as being a bit like your require.config(...). One of the things it does is set up your short names you can use to include your modules with. As a former require.js user, I accepted that I needed to include my require.js config file on the front-end as the entry point, and its the same for config.js - at least, for development...
4) Production is another matter. Quoting Guy Bedford on the Gitter group: "the config file isn't meant to be included in production \ workflows around that will develop". There's more info in the "Bundle for production" section in the Getting Started guide.
5) I found a useful starting point is Jack Franklin's demo from Async Brighton. Particularly of note: he has a bundle workflow for production which switches the script includes to just point to the minified app.min.js - see the Makefile.
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
