导出对象，在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 .

Answer 2

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');