使用 webpack 从 es6 模块导出和更改 javascript 对象。
如果我更改index.js中的配置属性,它会发生变化,但使用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 中的其他目录先执行
现在就这样挖掘。
最佳答案
通过这种模块导入方式解决了问题。
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));
}
关于javascript - 使用 webpack 和 babel 从 es6 模块导出和更改 javascript 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37884591/