8

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/plugin-css@0.1.6",
    "github:jspm/nodelibs-assert@0.1.0": {
      "assert": "npm:assert@1.3.0"
    },
    "github:jspm/nodelibs-buffer@0.1.0": {
      "buffer": "npm:buffer@3.0.3"
    },
    "github:jspm/nodelibs-events@0.1.0": {
      "events-browserify": "npm:events-browserify@0.0.1"
    },
    "github:jspm/nodelibs-http@1.7.0": {
      "Base64": "npm:Base64@0.2.1",
      "events": "github:jspm/nodelibs-events@0.1.0",
      "inherits": "npm:inherits@2.0.1",
      "stream": "github:jspm/nodelibs-stream@0.1.0",
      "url": "github:jspm/nodelibs-url@0.1.0",
      "util": "github:jspm/nodelibs-util@0.1.0"
    },
    "github:jspm/nodelibs-https@0.1.0": {
      "https-browserify": "npm:https-browserify@0.0.0"
    },
    "github:jspm/nodelibs-os@0.1.0": {
      "os-browserify": "npm:os-browserify@0.1.2"
    },
    "github:jspm/nodelibs-path@0.1.0": {
      "path-browserify": "npm:path-browserify@0.0.0"
    },
    "github:jspm/nodelibs-process@0.1.1": {
      "process": "npm:process@0.10.1"
    },
    "github:jspm/nodelibs-stream@0.1.0": {
      "stream-browserify": "npm:stream-browserify@1.0.0"
    },
    "github:jspm/nodelibs-url@0.1.0": {
      "url": "npm:url@0.10.3"
    },
    "github:jspm/nodelibs-util@0.1.0": {
      "util": "npm:util@0.10.3"
    },
    "github:systemjs/plugin-css@0.1.6": {
      "clean-css": "npm:clean-css@3.0.10",
      "fs": "github:jspm/nodelibs-fs@0.1.1",
      "path": "github:jspm/nodelibs-path@0.1.0"
    },
    "npm:amdefine@0.1.0": {
      "fs": "github:jspm/nodelibs-fs@0.1.1",
      "module": "github:jspm/nodelibs-module@0.1.0",
      "path": "github:jspm/nodelibs-path@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.1"
    },
    "npm:assert@1.3.0": {
      "util": "npm:util@0.10.3"
    },
    "npm:buffer@3.0.3": {
      "base64-js": "npm:base64-js@0.0.8",
      "ieee754": "npm:ieee754@1.1.4",
      "is-array": "npm:is-array@1.0.1"
    },
    "npm:clean-css@3.0.10": {
      "buffer": "github:jspm/nodelibs-buffer@0.1.0",
      "commander": "npm:commander@2.5.1",
      "fs": "github:jspm/nodelibs-fs@0.1.1",
      "http": "github:jspm/nodelibs-http@1.7.0",
      "https": "github:jspm/nodelibs-https@0.1.0",
      "os": "github:jspm/nodelibs-os@0.1.0",
      "path": "github:jspm/nodelibs-path@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.1",
      "source-map": "npm:source-map@0.1.43",
      "url": "github:jspm/nodelibs-url@0.1.0",
      "util": "github:jspm/nodelibs-util@0.1.0"
    },
    "npm:commander@2.5.1": {
      "child_process": "github:jspm/nodelibs-child_process@0.1.0",
      "events": "github:jspm/nodelibs-events@0.1.0",
      "path": "github:jspm/nodelibs-path@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.1"
    },
    "npm:core-util-is@1.0.1": {
      "buffer": "github:jspm/nodelibs-buffer@0.1.0"
    },
    "npm:events-browserify@0.0.1": {
      "process": "github:jspm/nodelibs-process@0.1.1"
    },
    "npm:https-browserify@0.0.0": {
      "http": "github:jspm/nodelibs-http@1.7.0"
    },
    "npm:inherits@2.0.1": {
      "util": "github:jspm/nodelibs-util@0.1.0"
    },
    "npm:os-browserify@0.1.2": {
      "os": "github:jspm/nodelibs-os@0.1.0"
    },
    "npm:path-browserify@0.0.0": {
      "process": "github:jspm/nodelibs-process@0.1.1"
    },
    "npm:punycode@1.3.2": {
      "process": "github:jspm/nodelibs-process@0.1.1"
    },
    "npm:readable-stream@1.1.13": {
      "buffer": "github:jspm/nodelibs-buffer@0.1.0",
      "core-util-is": "npm:core-util-is@1.0.1",
      "events": "github:jspm/nodelibs-events@0.1.0",
      "inherits": "npm:inherits@2.0.1",
      "isarray": "npm:isarray@0.0.1",
      "process": "github:jspm/nodelibs-process@0.1.1",
      "stream": "npm:stream-browserify@1.0.0",
      "string_decoder": "npm:string_decoder@0.10.31",
      "util": "github:jspm/nodelibs-util@0.1.0"
    },
    "npm:source-map@0.1.43": {
      "amdefine": "npm:amdefine@0.1.0",
      "fs": "github:jspm/nodelibs-fs@0.1.1",
      "path": "github:jspm/nodelibs-path@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.1"
    },
    "npm:stream-browserify@1.0.0": {
      "events": "github:jspm/nodelibs-events@0.1.0",
      "inherits": "npm:inherits@2.0.1",
      "readable-stream": "npm:readable-stream@1.1.13"
    },
    "npm:string_decoder@0.10.31": {
      "buffer": "github:jspm/nodelibs-buffer@0.1.0"
    },
    "npm:url@0.10.3": {
      "assert": "github:jspm/nodelibs-assert@0.1.0",
      "punycode": "npm:punycode@1.3.2",
      "querystring": "npm:querystring@0.2.0",
      "util": "github:jspm/nodelibs-util@0.1.0"
    },
    "npm:util@0.10.3": {
      "inherits": "npm:inherits@2.0.1",
      "process": "github:jspm/nodelibs-process@0.1.1"
    }
  }
});

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)?

Carlos Mendes
  • 1,900
  • 1
  • 18
  • 33
  • 1
    Even there are many dependencies declared in config.js it doesn't mean that all these will be loaded by the application. System.js will only load the dependencies that you import (or require()). – Adrian Mitev Mar 12 '15 at 07:34
  • Thank you @AdrianMitev. I know that, I'm just trying to avoid including 15-20kb in every page (the dependencies of the libraries I'm using) – Carlos Mendes Mar 12 '15 at 11:33
  • Add proper cache headers so the browser won't load it on each page. – Adrian Mitev Mar 12 '15 at 12:05
  • 1
    I'm already doing that. The point is avoiding sending that is not necessary at runtime. This configuration is only relevant for development – Carlos Mendes Mar 12 '15 at 17:57
  • I submitted this: https://github.com/jspm/jspm-cli/issues/652 – glen-84 Apr 07 '15 at 18:24

1 Answers1

7

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.

Community
  • 1
  • 1
poshaughnessy
  • 1,978
  • 3
  • 21
  • 35
  • I only installed css, jquery, and semantic-ui, and my file has 1,743 lines already. – glen-84 Apr 15 '15 at 09:43
  • Did you install the npm module for `semantic-ui`? That will pull in a bunch of other Node modules like gulp and all sorts... You only want its built CSS and JS on the client-side right? How about installing like this: jspm install semantic-ui=github:Semantic-Org/Semantic-UI (That's the github repo that the bower package refers to) – poshaughnessy Apr 15 '15 at 10:08
  • Also if someone was to add it to the JSPM registry (https://github.com/jspm/registry) then next time you could just do `jspm install semantic-ui` – poshaughnessy Apr 15 '15 at 10:36
  • 1
    I used: jspm install npm:semantic-ui -o "{ 'directories': { 'lib': 'dist' }, main: 'semantic', 'shim': { 'semantic': { 'deps': 'jquery' } } }" – glen-84 Apr 15 '15 at 11:56