使用 webpack 和 babel 从 es6 模块导出和更改 javascript 对象答案

【问题标题】：Export and changing javascript object from es6 module with webpack and babel使用 webpack 和 babel 从 es6 模块导出和更改 javascript 对象
【发布时间】：2016-10-19 11:17:02
【问题描述】：

使用 webpack 从 es6 模块导出和更改 javascript 对象。

如果我在 index.js 中更改 config 的属性，它会更改，但使用 Object.assign 并非不可能。
我的代码更好地描述了一个问题。
例子很简单

config.js

let config = {
    plugins: {
        slick: {
            autoplaySpeed: 1000,
            autoplay: true,
        }
    }
};
export default config;

index.js

import config from './config.js'
config.plugins.slick.autoplaySpeed = 500;
import './clientCode';

clientCode.js

import config from './config';

//autoplaySpeed: 500, as it need to be
console.dir(config.plugins.slick);  
//autoplaySpeed: 1000, needs to be 500, ->why<- value not changed?
console.dir(Object.assign({}, config.plugins.slick));

为什么值在 Object.assign 之后没有改变，但在 Object.assign 之前改变了？

但是，如果我直接在 clientCode.js 文件中为导出的配置赋值，那么在 Object.assign 之后值会发生变化。

clientCode.js

import config from './config';
config.plugins.slick.autoplaySpeed = 500;//new value assigning

//autoplaySpeed: 500, as it need to be
console.dir(config.plugins.slick)
//autoplaySpeed: 500, as it need to be
console.dir(Object.assign({}, config.plugins.slick));

我尝试重新启动我的 webpack 观察程序（认为问题出在 webpack 的缓存中），但这并没有解决问题。

如何更改一个文件中的配置值，并通过 Object.assign 在另一个文件中使用更改后的值？为什么会出现这个问题？

更新：
现在我知道问题出在这些文件的执行顺序上。
clientCode.js 中的 console.dir 比 index.js 中的其他一个先执行

现在这样挖。

【问题讨论】：

标签： javascript module ecmascript-6 webpack babeljs

【解决方案1】：

通过这种模块导入方式解决了问题。

index.js

import config from './config.js'
config.plugins.slick.autoplaySpeed = 500;
import init from './clientCode';
init();

clientCode.js

import config from './config';
export default function init(){
    //autoplaySpeed: 500, as it need to be
    console.dir(config.plugins.slick);  
    //autoplaySpeed: 500, 500, as it need to be
    console.dir(Object.assign({}, config.plugins.slick)); 
}

【讨论】：