Microbundle: Support importing images.

[dashed]

Hi!

Wondering if there's any interest to support importing images through using this plugin: https://github.com/bspaulding/rollup-plugin-image-files

Essentially a way to do this:

import React from 'react';
import { Image } from 'react-native';
import imageSrc from '../path/to/image.png';

export default const MyComponent = () => (
  <Image source={imageSrc}/>
);

[developit]

Would importing the image do anything that referencing it by path couldn't?

[Andarist]

IMHO we shouldnt do this at the moment because microbundle's main goal is to produce highly optimized distributable libraries and unfortunately importing assets is currently really coupled to the consuming bundler.

[marvinhagemeister]

Agree, although we do have postcss included (which I'm a bit skeptic of), opening the gates for assets brings a lot of complexity with it, which aren't solved anywhere really. webpack comes the closest, but still...

As soon as we allow arbitrary assets we need to think about how they are going to be loaded. That requires a dedicated loader for the target environment which is where the complexity goes through the roof.

[Andarist]

I'm also skeptic of having postcss here, how and in what scenarios is it used? What kind of setup is required from the consumers of packages built with that?

[dashed]

Regarding postcss, I've backtracked thru git blame, and it seems like the use case is to be able to support UI-based libraries which might bring in external assets (for example: React components):

• https://github.com/developit/microbundle/pull/30
• https://github.com/developit/microbundle/issues/22

---

I was shopping around for alternative bundlers to webpack, and microbundle was something I tried out initially.

I had some images in my source folder, and I wanted the bundler to somehow copy them to the build folder whenever it's referenced (e.g. imported).

Regarding the goals and the philosophy of microbundle, there's definitely a concern on whether or not arbitrary assets should be supported. Unfortunately, I was unaware of the hesitancy to add more support for assets 😬 .

Though, from what I can see, one nice resolution to this is to maybe to add some documentation to redirect users to other bundlers that have support for more complex assets (e.g. parcel).

---

Feel free to close this issue 👍 .

[marvinhagemeister]

Regarding the best use case for bundlers it she always been rollup for libs and webpack/parcel for apps. Microbundle is based on rollup and naturally lends itself better for libs.

[Andarist]

Actually - rollup became lately a pretty nice alternative for bundling apps too. However what I would personally recommend is to configure it yourself instead of depending on a wrapper (microbundle) around it. Configuring it is way easier than webpack, but if you are looking for 0 config solution then probably Parcel would suit you better.

[Xiphe]

I'm also looking into shiping assets along with my (microbundled) code.
For me it would make sense to import the files in my code and flag the asset folder as external so that the consumer needs to handle the imports on their side. Tthis is also proposed by webpack contributors.

I'm currently not able to use complex patterns (glob, regex) to describe stuff that should be ignored by microbundle. - For my usecase that would enable me to keep using microbundle over custom rollup.

Would you be interested in supporting such a feature? I'd happily contribute a PR

[Xiphe]

Just realized that i'm ideed able to partly use regex in the --external option.

Though it's probably not the intended use, I was able to solve my problem with --external .*/assets/.* (Windows: --external .*/assets/.*,.*\\\\assets\\\\.* 😅)