在 ES6 中导出对象、扩展和重新导出它答案

【问题标题】：Export object, extend and re-export it in ES6在 ES6 中导出对象、扩展和重新导出它
【发布时间】：2015-12-21 13:45:27
【问题描述】：

我想定义一个具有共同属性的对象：

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

在另一个文件中，我想用自定义属性对其进行扩展：

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

然后，我想读取和修改其他文件中的对象：

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

当时我正在使用 browserify 和 require 以及 modules.export 语法。但我想使用 ES6 语法。

我该怎么做？谢谢。

【问题讨论】：

不清楚你在问什么。您是否在问如何使用 ES6 模块语法导出某些内容？ Object.assign 不会改变。
我写的片段在三个不同的文件中。您将如何定义导出和导入声明以使此代码正常工作？

标签： javascript import ecmascript-6

【解决方案1】：

导出的变量是跨模块绑定的，所以你可以修改导入的值，它会在其他地方改变

//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对此有更多解释。

此外，Rollup 项目主页有一个很好的平台来测试 es6 模块的工作原理。见this example。

【讨论】：

在b.js 中导入a.js 还不够吗？为什么config.js已经在a.js中导入了，还要在b.js中导入？
您希望如何访问 config.js？您可以从b.js 再次导出Config，然后一次导入就足够了。
好的，我明白了。并且有理由将 Config 声明为常量？为什么不只是一个变量？修改一个常量的内容似乎很奇怪。
const 在Javascript中意味着你不能改变对对象的引用。您无法为其分配新对象，但您仍然可以改变该对象本身。

【解决方案2】：

你可以做一个工厂：

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

【讨论】：