How do I use Javascript ES6 ES2015 modules to export / import constants directly to the import module namespace?

xweb

OK, I can't quite find the answer to this. I am using webpack and babel es2015 preset to handle ES2015 modules.

Module 1 to export, filename "foobar.js"

export const FOO = 'foo'
export const BAR = 'bar'

Is there a way to import this constant into my global namespace in my import module?

I want to do this in my module that will use the constants:

import 'foobar'

const doSomething = () => { console.log(FOO + BAR) }

I know that this would work:

import * as CONSTANTS from 'foobar'

const doSomething = () => { console.log(CONSTANTS.FOO + CONSTANTS.BAR) }

...and that there are other ways to achieve the same result of the import being in a particular namespace. But I want to use the constants without a prefix.

Is there a way to directly import ALL the exports from a different module into the root namespace of the importing module?

*NOTE: I know that I can do this:

import {FOO, BAR} from 'foobar'

But then I have to explicitly reference each of the constants in the import, which leads to more headaches rather than less.

samanime

In addition to the two options you already referenced:

import * as CONSTANTS from 'foobar';
import { FOO, BAR } from 'foobar';

You can also do a default export to get them all, but it's functionally the same as option one:

// foobar.js
const FOO = 'foo';
const BAR = 'bar';

export default { FOO, BAR };

// myfile.js
import CONSTANTS from 'foobar';

The other method would be to dynamically populate them for either global or window (global for Node.js, window for browser code).

However, I highly recommend NOT using this method as you won't be able to use any help from your IDE, which will lead to lots of errors. Writing the extra code now is totally worth not having difficult-to-spot bugs later on.

import CONSTANTS from 'foobar';

Object.keys(CONSTANTS).forEach(key => window[key] = CONSTANTS[key]);

console.log(FOO, BAR);   

Example:

const CONSTANTS = { FOO: 'foo', BAR: 'bar' };

Object.keys(CONSTANTS).forEach(key => window[key] = CONSTANTS[key]);

console.log(FOO, BAR);

By putting them in the root level element, you can get away without having to implement them directly.

However, please don't use this method.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How do I import chartjs as an es6 module?

How do I import extensions to an ES6/Typescript module

es2015 module syntax, how do I import a file that is outside of my project's directory

module specifier in es6 import and export

Using node how do I import my ES6-export-default module into my command line javascript program?

Typescript do you import `lodash` -- with `es2015` modules?

javascript es6 import symbols into a namespace

How to use ES6 import/export with Webpack 4?

How do import / export work in ES6?

How to export and import class properly in javascript ES6

How do I mock externally injected libraries that use import (ES6 typescript) exported in a node module for unit testing

How to import ES2015 modules functions selectively, but with namespacing?

How to import and use zone.js in Angular 2+ and ES2015 Modules

How do I import jQuery Masonry using ES6 modules?

In typescript, how can I import a plain javascript file with a default export using es6 syntax?

how to use node module with es6 import syntax in typescript

How to use ES6 import with 'request' npm module

Is it possible to export the result of "import * as" in ES2015?

How can I conditionally import an ES6 module?

Can I use an ES6/2015 module import to set a reference in 'global' scope?

How do I use ES6 (ES2015) in a ruby on rails app?

How to reimport module with ES6 import

How do I override inherited methods when using JavaScript ES6/ES2015 subclassing

How can I use an es6 import in node?

Is there a way to use ES6 modules to import modules with the ArcGIS API

How do I create a main import file in ES6?

ES6 module import export with webpack and babel-loader

Jest es6 modules: unexpected module import

How to use ES6 modules that import modules with relative paths in ClosureScript?