使用Webpack在ES6模块之间交换变量

Question

如您所知，可以访问模块中主js文件的导出变量和函数，例如：

module1.js

export const MODULE1_CONSTANT1 = 'Test Const From the module1.js';

main.js

import { MODULE1_CONSTANT1 } from './module1';
console.log(MODULE1_CONSTANT1);

但是：是否可以从module1.js访问main.js变量？ 我想答案是一样的，因此可以通过模块之间的变量交换吗？

我知道这不仅与JavaScript有关，而且项目构建系统也有影响，所以让我们在这个问题中考虑Webpack 。

Answer 1

使用关键字require替换关键字import （因为import必须在源代码的顶部，这是ES6语法），并创建一个函数来访问每个模块，我认为它可以实现模块之间的变量交换。

// module1.js
export const MODULE1_CONSTANT1 = 'Test Const From the module1.js';
export function MAIN_CONSTANT1() {
    return require('./main').MAIN_CONSTANT1;
};


// main.js
export const MAIN_CONSTANT1 = 'Test Const From the main.js';
export function MODULE1_CONSTANT1() {
    return require('./module1').MODULE1_CONSTANT1;
};

// hello.js
import {MAIN_CONSTANT1 as main_MAIN_CONSTANT1, MODULE1_CONSTANT1 as main_MODULE1_CONSTANT1} from './main';
import {MAIN_CONSTANT1 as module1_MAIN_CONSTANT1, MODULE1_CONSTANT1 as module1_MODULE1_CONSTANT1} from './module1';

console.log('main_MAIN_CONSTANT1', main_MAIN_CONSTANT1);
console.log('main_MODULE1_CONSTANT1', main_MODULE1_CONSTANT1());
console.log('module1_MAIN_CONSTANT1', module1_MAIN_CONSTANT1());
console.log('MODULE1_CONSTANT1', module1_MODULE1_CONSTANT1);
// output
// >>> MAIN_CONSTANT1 Test Const From the main.js
// >>> MODULE1_CONSTANT1 Test Const From the module1.js
// >>> module1_MAIN_CONSTANT1 Test Const From the main.js
// >>> module1_MODULE1_CONSTANT1 Test Const From the module1.js