javascript - ES6 模块与 Webpack 之间的变量交换

Question

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

module1.js

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

ma​​in.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