What is the correct way to define global variable in ES6 modules?

There are several ways to have global values available in your application.

Using ES6 modules, you can create a constant which you export from your module. You can then import this from any other module or component, like so:

/* Constants.js */
export default {
    VALUE_1: 123,
    VALUE_2: "abc"

/* OtherModule.js */
import Constants from '../Constants';


Alternatively, some JS bundling tools provide a way to pass values into your components at build time.

For example, if you’re using Webpack, you can use DefinePlugin to configure a few constants available at compile time, like so:

/* Webpack configuration */
const webpack = require('webpack');

/* Webpack plugins definition */
new webpack.DefinePlugin({
    'VALUE_1': 123,
    'VALUE_2': 'abc'

/* SomeComponent.js */
if (VALUE_1 === 123) {
    // do something

Leave a Comment