javascript - Export object, extend and re-export it in ES6 - Stack Overflow

I want to define an object with mon 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.

I want to define an object with mon 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.

• javascript
• import
• ecmascript-6

Share Improve this question Follow asked Dec 21, 2015 at 13:45 dgnindgnin 1,60722 gold badges2222 silver badges3535 bronze badges 2

• 2 It's unclear what you're asking. Are you asking how to export something using ES6 module syntax? Object.assign doesn't change. – T.J. Crowder Commented Dec 21, 2015 at 13:57
• The fragments I wrote are in three different files. How do you would define the export and import declarations to make this code work? – dgnin Commented Dec 21, 2015 at 15:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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.

You can make a factory:

//config.js
export function createConfig(ext) {
  return Object.assign(
    {},
    {
      a: 'fsdf',
      b: 56,
      c: 'fsfsdfsd',
      set (prop, val) {
        this[prop] = val;
      }
    },
    ext
  );
};

//index.js
import { createConfig } from './config';

let config = createConfig({
  d: 34,
  e: 'qqwqw'
});

export config;

// x.js
import { config } from './index.js';

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