Import Jimp into Aurelia

1
votes

I have installed Jimp via jspm in my aurelia app without problems. In my viewModel/class I import Jimp. When I run gulp watch and check the browser console, I got following error:

GET //localhost:9000/jspm_packages/npm/[email protected]/ 404 (Not Found)

I think uitl is a dependency from jimp, but why is this not found?

My config.js:

    System.config({
      defaultJSExtensions: true,
      transpiler: "babel",
      babelOptions: {
        "optional": [
          "es7.decorators",
          "es7.classProperties"
        ]
      },
      paths: {
        "*": "dist/*",
        "github:*": "jspm_packages/github/*",
        "npm:*": "jspm_packages/npm/*"
      }, map {...
"github:jspm/[email protected]": {
      "util": "npm:[email protected]"
    },....
 "npm:[email protected]": {
      "util": "npm:[email protected]"
    },...
  "npm:[email protected]": {
      "inherits": "npm:[email protected]",
      "process": "github:jspm/[email protected]"
    },...
}
2
aurelia
the "map" part is the important one – Fabio Luz
because the config has to many caracters, which parts should I post? For now, I post all parts which include [email protected] which throw the error – Zantinger
that's strange. Jimp seems to have no dependencies from [email protected]. Perhaps the problem is being caused by something else. – Fabio Luz
@Zantinger If you uninstall Jimp, is the problem solved? Suggestion: try reinstalling util again. – qtuan
I tried your suggestions, but at all I get the error 404. For now, I leave aurelia and switch to simple JS, because to found the error is to time-consuming for me. Thank you guys, – Zantinger

2 Answers

1
votes

Quick solution is to import full minimized library:

import 'jimp/browser/lib/jimp.min';
1
votes

It a nightmare trying to include 'jimp' library into Auralia with Typescript

First tried to setup the jimp library in the aurelia.json (using aurelia cli) Like so as Crabulki pointed out to use the jimp browser library inside the "dependencies" tag

{ "name": "jimp", "path": "../node_modules/jimp/browser", "main": "lib/jimp.js" }

and then do typings install "jimp" (if using typescript)

in your typescript code "import * as Jimp from 'jimp";

It compiles run but when test it, browser show error in regards to the import jimp.js library: So resort to do as minimal possible the solution as follow:

In aurelia.json, include the 'jimp.min.js' library in the 'prepend' like so:

"prepend": [ "another library to include when browser load1...", "another library to include when browser load2...", "node_modules/jimp/browser/lib/jimp.js", ]

In your typescript code without using typescript import definitions (because aurealia required bundle does not work properly for 'jimp')

var url = "https://upload.wikimedia.org/wikipedia/commons/0/01/Bot-Test.jpg";

    let Jimp = window['Jimp']; // This the trick to access the global library that does not fit into Aurelia require module

    Jimp.read(url).then(function(image) {
        image.greyscale().getBuffer(Jimp.MIME_JPEG, onBuffer);
    }).catch(function(err) {
        console.error(err);
    })

    function onBuffer(err, buffer) {
        if (err) throw err;
        console.log(buffer);
    }