Javascript 传递全局变量以导入JS模块

假设我有两个使用webpack导入的JS文件。我想创建可以在整个应用程序中使用的全局变量。问题是，经过大量的错误尝试后，我无法做到这一点。我看到过类似的问题，但这种情况是独一无二的（加上答案不起作用）

我已经把它缩小到最简单的形式来解释我要做什么

one.js

class oneJS {
    constructor() {
        var windowWidth = $(window).width()
    }
}
export default oneJS

class twoJS {
    constructor() {
        if (windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        };
    }
}
export default twoJS

import oneJS from 'one.js';
new oneJS();

import twoJS from 'two.js';
new twoJS();

class OneJS {
    constructor() {
        this.windowWidth = $(window).width(); // Store the value on the instance
    }
}
export default OneJS;

class TwoJS {
    constructor(one) {
        if (one.windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        }
    }
}
export default TwoJS

import OneJS from 'one.js';
import TwoJS from 'two.js';

const oneJS = new OneJS();

new TwoJS(oneJS);

two.js

class oneJS {
    constructor() {
        var windowWidth = $(window).width()
    }
}
export default oneJS

class twoJS {
    constructor() {
        if (windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        };
    }
}
export default twoJS

import oneJS from 'one.js';
new oneJS();

import twoJS from 'two.js';
new twoJS();

class OneJS {
    constructor() {
        this.windowWidth = $(window).width(); // Store the value on the instance
    }
}
export default OneJS;

class TwoJS {
    constructor(one) {
        if (one.windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        }
    }
}
export default TwoJS

import OneJS from 'one.js';
import TwoJS from 'two.js';

const oneJS = new OneJS();

new TwoJS(oneJS);

index.js

class oneJS {
    constructor() {
        var windowWidth = $(window).width()
    }
}
export default oneJS

class twoJS {
    constructor() {
        if (windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        };
    }
}
export default twoJS

import oneJS from 'one.js';
new oneJS();

import twoJS from 'two.js';
new twoJS();

class OneJS {
    constructor() {
        this.windowWidth = $(window).width(); // Store the value on the instance
    }
}
export default OneJS;

class TwoJS {
    constructor(one) {
        if (one.windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        }
    }
}
export default TwoJS

import OneJS from 'one.js';
import TwoJS from 'two.js';

const oneJS = new OneJS();

new TwoJS(oneJS);

---

一如既往，请提前感谢。

您可以将您的值存储为OneJS上的实例属性，并利用构造函数注入将OneJS实例注入需要访问相同值的所有其他类实例，例如

one.js

class oneJS {
    constructor() {
        var windowWidth = $(window).width()
    }
}
export default oneJS

class twoJS {
    constructor() {
        if (windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        };
    }
}
export default twoJS

import oneJS from 'one.js';
new oneJS();

import twoJS from 'two.js';
new twoJS();

class OneJS {
    constructor() {
        this.windowWidth = $(window).width(); // Store the value on the instance
    }
}
export default OneJS;

class TwoJS {
    constructor(one) {
        if (one.windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        }
    }
}
export default TwoJS

import OneJS from 'one.js';
import TwoJS from 'two.js';

const oneJS = new OneJS();

new TwoJS(oneJS);

two.js

class oneJS {
    constructor() {
        var windowWidth = $(window).width()
    }
}
export default oneJS

class twoJS {
    constructor() {
        if (windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        };
    }
}
export default twoJS

import oneJS from 'one.js';
new oneJS();

import twoJS from 'two.js';
new twoJS();

class OneJS {
    constructor() {
        this.windowWidth = $(window).width(); // Store the value on the instance
    }
}
export default OneJS;

class TwoJS {
    constructor(one) {
        if (one.windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        }
    }
}
export default TwoJS

import OneJS from 'one.js';
import TwoJS from 'two.js';

const oneJS = new OneJS();

new TwoJS(oneJS);

index.js

class oneJS {
    constructor() {
        var windowWidth = $(window).width()
    }
}
export default oneJS

class twoJS {
    constructor() {
        if (windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        };
    }
}
export default twoJS

import oneJS from 'one.js';
new oneJS();

import twoJS from 'two.js';
new twoJS();

class OneJS {
    constructor() {
        this.windowWidth = $(window).width(); // Store the value on the instance
    }
}
export default OneJS;

class TwoJS {
    constructor(one) {
        if (one.windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        }
    }
}
export default TwoJS

import OneJS from 'one.js';
import TwoJS from 'two.js';

const oneJS = new OneJS();

new TwoJS(oneJS);

---

您可以将您的值存储为OneJS上的实例属性，并利用构造函数注入将OneJS实例注入需要访问相同值的所有其他类实例，例如

one.js

class oneJS {
    constructor() {
        var windowWidth = $(window).width()
    }
}
export default oneJS

class twoJS {
    constructor() {
        if (windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        };
    }
}
export default twoJS

import oneJS from 'one.js';
new oneJS();

import twoJS from 'two.js';
new twoJS();

class OneJS {
    constructor() {
        this.windowWidth = $(window).width(); // Store the value on the instance
    }
}
export default OneJS;

class TwoJS {
    constructor(one) {
        if (one.windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        }
    }
}
export default TwoJS

import OneJS from 'one.js';
import TwoJS from 'two.js';

const oneJS = new OneJS();

new TwoJS(oneJS);

two.js

class oneJS {
    constructor() {
        var windowWidth = $(window).width()
    }
}
export default oneJS

class twoJS {
    constructor() {
        if (windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        };
    }
}
export default twoJS

import oneJS from 'one.js';
new oneJS();

import twoJS from 'two.js';
new twoJS();

class OneJS {
    constructor() {
        this.windowWidth = $(window).width(); // Store the value on the instance
    }
}
export default OneJS;

class TwoJS {
    constructor(one) {
        if (one.windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        }
    }
}
export default TwoJS

import OneJS from 'one.js';
import TwoJS from 'two.js';

const oneJS = new OneJS();

new TwoJS(oneJS);

index.js

class oneJS {
    constructor() {
        var windowWidth = $(window).width()
    }
}
export default oneJS

class twoJS {
    constructor() {
        if (windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        };
    }
}
export default twoJS

import oneJS from 'one.js';
new oneJS();

import twoJS from 'two.js';
new twoJS();

class OneJS {
    constructor() {
        this.windowWidth = $(window).width(); // Store the value on the instance
    }
}
export default OneJS;

class TwoJS {
    constructor(one) {
        if (one.windowWidth >= 1200) {
            console.log('greater than');
        } else {
            console.log('less than');
        }
    }
}
export default TwoJS

import OneJS from 'one.js';
import TwoJS from 'two.js';

const oneJS = new OneJS();

new TwoJS(oneJS);

---

不要使用全局变量。相反，把它们放在一个公共模块中。我理解。我相信one.js就是那个常见的模块（如果我理解你的答案的话）。问题可能出在出口方面吗？你能详细说明一下你的答案吗？谢谢不要使用全局变量。相反，把它们放在一个公共模块中。我理解。我相信one.js就是那个常见的模块（如果我理解你的答案的话）。问题可能出在出口方面吗？你能详细说明一下你的答案吗？谢谢我不认为这是所谓的“构造函数注入”，但是的，这就是方法@Bergi可能是对的，我已经有一段时间没有做过OOP风格的编程了：）我不认为这叫做“构造函数注入”，但是的，这是正确的方法@Bergi可能是对的，我已经有一段时间没有做过OOP风格的编程了：）