Help us understand the problem. What is going on with this article?

webpackでモジュール間で共通変数を持ちたい

2020/05/10追記

うまくいかず、、

hoge.jsでの変更が huga.jsに反映されませんでした。
定数の扱いになってしまうみたいで、
huga.jsの glogals.a は、10のまま。。

これを試しても、やはり同じ感じです。
https://webpack.js.org/plugins/provide-plugin/

webpackの仕様が変わったのか。
とりあえず、windowオブジェクトに名前空間用意するしかないかなぁ。。

誰か知っているかた、おしえてください!

jsファイル間で変数を共有したい時

その昔は、、、

globals.js
(function(){}(
 window.common = {
  a:10,
  b:12
}
))();
a.js
(function(){}(
 window.common = window.common || {}
 window.common.a++;
 console.log(window.common.a); // 11
))();

b.js
(function(){}(
 window.common = window.common || {}
 window.common.a++;
 console.log(window.common.a); // 12
))();
index.html
<html>
<title>バンドルツール出る前の旧石器時代</title>
<head>
</head>
<body>
<script src="./globals.js">
<script src="./a.js">
<script src="./b.js">
</body>

こんなことしてた

webpack使った時

同じ事したい時、どうすればいいのか。
この記事を見て、実験してみたらうまいこといった。
ES6 Modules 間では export/import された変数(?)は同期される

globals.js
export default {
  a:10,
  b:15
};
module_hoge.js
import globals from './globals';
console.log(globals.a) // 10
globals.a++;
console.log(globals.a) // 11
module_huga.js
import globals from './globals';
console.log(globals.a) // 11

:relaxed:

この方法は正しいのだろうか。
他にも色々ありそう。
https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack

resistance_gowy
フロントエンド。 https://github.com/underground0930/ https://twitter.com/resistance_gowy http://resistance-underground.hateblo.jp/
https://htmlgo.site/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away