Export object, extend and re-export it in ES6

Question

I want to define an object with common properties:

var Config = {
  a: 'fsdf',
  b: 56,
  c: 'fsfsdfsd',
  set: function set(prop, val) {
    this[prop] = val;
  }
};

In another file, I want to extend it with custom properties:

var Config = Object.assign(Config, {
  d: 34,
  e: 'qqwqw'
});

And then, I want to read and modify the object in other files:

var x = Config.d + Config.b;
Config.set('a', 'asdf');

At the momment I was using browserify and require and modules.export syntax. But I want to use ES6 syntax.

How can I do it? Thank you.

Answer 1

Exported variables are bound across modules, so you can modify imported value and it will be changed in other places

//config.js
const Config = {a: 'value1'};
export default Config;

//a.js
import Config from './config';
// you don't need to reassign return value, first argument will be mutated itself
Object.assign(Config, {a: 'value2'}); 

//b.js
import Config from './config';
import './a';

console.log(Config); // prints {a: 'value2'}

This article has more explanations about it.

Also, Rollup project homepage has a great playground to test how es6 modules works. See this example.