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

Question

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

模块1.js

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

主.js

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

但是：这是从module1.js访问main.js变量的方法吗？我想，答案是相同的，那么是否可以在模块之间通过变量进行交换？

我知道这不仅是JavaScript的问题，项目构建系统也有影响，所以让我们在这个问题上考虑Webpack。

Answer 1

use 关键字

require replace 关键字 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