CODEWITHSUNDEEP
javascriptecmascript-6es6-module-loader
mikl
mikl

Reputation: 24307

How to import everything exported from a file with ES2015 syntax? Is there a wildcard?

With ES2015 syntax, we have the new import syntax, and I've been trying to figure out how to import everything exported from one file into another, without having it wrapped in an object, ie. available as if they were defined in the same file.

So, essentially, this:

// constants.js

const MYAPP_BAR = 'bar'
const MYAPP_FOO = 'foo'

// reducers.js

import * from './constants'

console.log(MYAPP_FOO)

This does not work, at least according to my Babel/Webpack setup, this syntax is not valid.

Alternatives

This works (but is long and annoying if you need more than a couple of things imported):

// reducers.js

import { MYAPP_BAR, MYAPP_FOO } from './constants'

console.log(MYAPP_FOO)

As does this (but it wraps the consts in an object):

// reducers.js

import * as consts from './constants'

console.log(consts.MYAPP_FOO)

Is there a syntax for the first variant, or do you have to either import each thing by name, or use the wrapper object?

Upvotes: 54

Views: 59327

Answers (5)

Chenhua
Chenhua

Reputation: 203

In ES6, with below code, imported content can be used without wrap object.

Just put it here for someone like me who ends searching here.

constants.js:

export const A = 2;
export const B = 0.01; 
export const C = 0.04;

main.js:

import * as constants from './constants'
const {
    A,
    B,
    C,
} = constants;

Upvotes: -3

user1966866
user1966866

Reputation: 21

well you could import the object, iterate over its properties and then manually generate the constants with eval like this

import constants from './constants.js'

for (const c in constants) {
  eval(`const ${c} = ${constants[c]}`)
}

unfortunately this solution doesn't work with intellisense in my IDE since the constants are generated dynamically during execution. But it should work in general.

Upvotes: 2

林东吴
林东吴

Reputation: 308

Sure there are.

Just use codegen.macro

codegen
      'const { ' + Object.keys(require('./path/to/file')).join(',') + '} = require("./path/to/file");

But it seems that you can't import variable generated by codegen. https://github.com/kentcdodds/babel-plugin-codegen/issues/10

Upvotes: 0

just-boris
just-boris

Reputation: 9766

You cannot import all variables by wildcard for the first variant because it causes clashing variables if you have it with the same name in different files.

//a.js
export const MY_VAR = 1;

//b.js
export const MY_VAR = 2;


//index.js
import * from './a.js';
import * from './b.js';

console.log(MY_VAR); // which value should be there?

Because here we can't resolve the actual value of MY_VAR, this kind of import is not possible.

For your case, if you have a lot of values to import, will be better to export them all as object:

// reducers.js

import * as constants from './constants'

console.log(constants.MYAPP_FOO)

Upvotes: 57

Felix Kling
Felix Kling

Reputation: 816970

Is there a syntax for the first variant,

No.

or do you have to either import each thing by name, or use the wrapper object?

Yes.

Upvotes: 37

Related Questions