Static Assets compiler released - import images, etc into your JS files

announce
1

With the nathantreid:static-assets build plugin you can now import static assets in your JS files, eg:

import myImage from '/imports/client/my-image.png';`

console.log(myImage); // http://localhost:3000/static/imports/client/my-image.png

There are many times you may want to import a static asset into Meteor, but have been unable to. Perhaps an NPM package you wanted to use imported an image, and you had to jump through hoops to get it working? No longer! :smiley: This newly released build plugin is here to save the day!
I’ve been meaning to get around to this for a while and a post I saw on the forums today finally motivated me to do it.
By default the plugin will process jpg, png, and svg files and will host them at static/path/to/your/file. The extensions and hosting prefix (static/) can be configured via package.json. See the Atmosphere or GitHub page for more info.
A sample project demoing importing an image (test.png) can be found here: https://github.com/nathantreid/meteor-static-assets-sample

While I started with just jpg, png, and svg files, I think it makes sense to default to the most common, so please let me know what file extensions you think should be handled by default!

16 Likes
2

Sounds interesting. Does it work when used inside packages, too?

3

Prior to your question, the answer was no. Now, it is yes! The files will be hosted at packages/your-package-name/static/path/to/your/file.

1 Like
4

Yes! This is awesome!!

5

How does this work when the package has some css with background-image('foo/bar.svg'), but now the image is being loaded at packages/your-package-name/static/foo/bar.svg ?

6

Currently that wouldn’t work - you’d need to place the images in the public folder. I am however open to discussing a feature/PR that allows you to more granularly specify path mappings via the package options, probably of the form:

pathMappings: {
  "my:package": "",
  "some/.*/path": "foo",
}

where each key in pathMappings is a regular expression and the corresponding value is the replacement.
It would need to modify the code around this line.

7

Totally need the gifs !

1 Like
8
When life gives you lemons, just say FUCK THE LEMONS, and bail. Twitter/Vine-@Janelleabean

LOL!
:slight_smile:

1 Like
9

This is my problem that has been driving me nuts: https://github.com/nathantreid/meteor-static-assets/issues/4.

10

I’m having issues with this: https://github.com/nathantreid/meteor-static-assets/issues/8.