Parcel: Equivalent of require.context from Webpack?

[TotomInc]

Choose one: 🙋 feature request?

🔦 Context

What I'm trying to do is import all images (> 100 images) from a subdirectory, using a regexp. It was possible using webpack require.context (code sample below). I have seen #511 which talks about webpack require.context. This feature was very important (for me atleast) since it saves a tons of lines instead of importing all your assets line by line.

💻 Code Sample

I have a utility function which automatically require all my assets depending of the subdir and regexp I pass as parameters. This is a code sample that work on the latest version of webpack (3.10.0).

// require-all.js
function requireAll(r) {
  const dirContent = r.keys().map(r);
  const obj = {};

  dirContent.map((value) => {
    let name = value.substring(value.lastIndexOf('/') + 1, value.indexOf('.'));
    obj[name] = value;
  });

  return obj;
}

export { requireAll };

// foo.js
import { requireAll } from './require-all';

const images = requireAll(require.context('../../assets/', true, /\.png$/));
const audios = requireAll(require.context('../../assets/', true, /\.mp3$/));

Which throw an error because require.context doesn't exist with Parcel and is specific to webpack:

Uncaught TypeError: require.context is not a function

Any plans on supporting or introduce the equivalent of require.context?

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.5.1
| Node | 8.9.2
| npm/Yarn | [email protected]
| Operating System | MacOS High Sierra 10.13.3

[lbguilherme]

You should be able to do const images = require('../../assets/*.png');. But I just tested it and seems like it caused some unrelated bug.

So what I can say is that the feature is there, but it has issues. Anyway, can you try that?

[TotomInc]

require(../../assets/*.png) works well, even with other file-types like mp3. What bugs did you encountered @lbguilherme?

As a side-note, I think there are not enough documentation about importing assets. The docs say, in the assets part, that you can require a commonJS module. Can't we add that it's also possible to import various assets using the require syntax and not only the import?

Thanks for the help! 😄

[lbguilherme]

For me they are mentioned in the js bundle, but the files themselves are not bundled and are missing at the end. I'll still investigate it. Might be some issue only on me.

[ekoeryanto]

Halo, how to get a list of files?

[TotomInc]

I've made a small util function to retrieve all images from a folder that I was using in my old projects:

// Util
function requireAll(r) {
  const dirContent = r.keys().map(r);
  const obj = {};

  dirContent.map((value) => {
    let name = value.substring((value.indexOf('img/') + 4), value.indexOf('.', 3));
    obj[name] = value;
  });

  return obj;
}

export default requireAll;

// Usage
const images = requireAll(require.context('./assets/', false, /\.png$/));

This should get you started on how to retrieve files from a folder, including its sub-folder.

More info about require.context here.

[ekoeryanto]

require.context work with parceljs?

[skyFi]

@ekoeryanto no