2016-06-17 7 views
1

webpackを使用してes6モジュールからjavascriptオブジェクトをエクスポートおよび変更します。webpackとbabelを使用してes6モジュールからJavaScriptオブジェクトをエクスポートおよび変更する

私がindex.jsでconfigのプロパティを変更すると、変更されますが、Object.assignを使用することは不可能ではありません。
私のコードは問題をより良く説明しています。
例は、値が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)); 

をsimplidiedれます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ののキャッシュにあると思います)、 を再起動しようとしたが、これは問題を解決していませんでした。

1つのファイルでconfigの値を変更し、Object.assignで別のファイルで変更した値を使用するにはどうすればよいですか? この問題がなぜ発生するのですか?

更新:
問題はこれらのファイルの実行の順序にある​​ことを理解しました。
client.code.js内のconsole.dirは、index.js内の他のものよりも前に実行されます。

このようにして掘り下げます。

答えて

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)); 
} 
+0

ニースソリューション、ありがとう – fungusanthrax

関連する問題