Import multiple named exports of module into a single object

Question

Suppose I have:

animals.js

import cat from './cat';
import dog from './dog';
import emu from './emu';
import pig from './pig';
import cow from './cow';

export { cat, dog, emu, pig, cow };

In a module that uses animals.js, how can I import only a couple of needed ones into a keyed object? I'd like to be able to do something like:

my-module.js

import { cat, dog } as housePets from './animals';

// housePets == { cat: theCatModule, dog: theDogModule }

But according to my IDE, this syntax is not correct.

Is there a way to do this? Or is the best way to simply import all of them individually, then construct my own objects afterward?

Indorse

either of the two ways are correct. But its better to import only those modules which is used in the file. – Anodic

@VikashSingh You say either of the two ways are correct, but the example I provided in my question is not proper syntax according to my IDE, so it does not work. Are you aware of a syntax during the import that allows me to do what I'm asking? – Indorse

What exactly is the error that you are getting in your IDE? – Fifty

Several errors because it's not legal JS syntax. Specifically, in Webstorm, I get Expression statement is not assignment or call. The spaces before and after from are red squigglied: Expecting newline or semicolon. And my ESLint parser highlights as with: Parsing error: Unexpected token. – Indorse

Answer 1

Sadly nothing like that is possible in the ECMA-262 specifications. They only lists these possibilities:

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");

Best that you can do (only add a single line) is the following:

import { cat, dog } from './animals';
const housePets = { cat, dog };

Dykes

Answer 2

If you plan on using housePets in other modules then also export housePets as a part of animals.js

animals.js

import cat from './cat';
import dog from './dog';
import emu from './emu';
import pig from './pig';
import cow from './cow';

const housePets = { cat, dog }

export { cat, dog, emu, pig, cow };
export { housePets };

my-module.js

import { cat, dog, housePets } from './animals';

console.log(cat);
console.log(dog);
console.log(housePets);

Viscountcy

Answer 3

As @johannchopin mentioned in their answer, this is not possible as per the latest specs. However if you want import ALL the exports from a file in a single key name, you can try something like this -

foo.js

const a = '123';
const b = 123;

export default { a, b };

bar.js

import KeyName from './temp';

console.log(KeyName.a, KeyName.b);

Complaisance