webpack/babel：在包之间共享变量的最佳方式是什么？

Question

我有 2 个单独的 js 包加载在同一个 html 页面上，所以 webpack.config.js：

entry: {
  preload: "./preload.tsx",
  main: "./index.tsx"
}

目标：preload.js 生成需要由 main.js 访问的缓存表的 Promise。

但是它们需要是单独的包，因此import不起作用，这将导致 preload.js 执行两次。 我试图：

• 添加一个全局变量（无法弄清楚实际定义应该在哪里 go 所以Uncaught ReferenceError: global_variable is not defined
• 向 window 对象添加一个额外的属性（无法弄清楚如何使它与 TypeScript 3.9 一起工作。在这里尝试了几乎所有的东西。唯一有效的是(window as any)它看起来很邪恶
• 我不想要像使用 LocalStorage 或 DOM 操作这样的变通办法。

从 TypeScript 3.9 开始，我找不到合适的解决方案。 任何建议将不胜感激。

Answer 1

就像评论中提到的@Elias 一样，我认为首选解决方案是动态导入解决方案，但要回答问题，您可以做以下两件事之一：

1.使用提供插件：

plugins: [
   new webpack.ProvidePlugin({
      globalVar: path.resolve(path.join(__dirname, 'src/GlobalVarModule'))
   });
]

GlobalBarModule.ts：

var globalVar = "my global var value"
module.exports = globalVar;

和简单的用法：Index.js：

console.log(globalVar);

每当标识符（ globalVar ）在模块中作为自由变量遇到时，模块会自动加载，并且标识符会填充加载模块的导出（或属性以支持命名导出）。

-来自文档。

2.使用Externals让 webpack 知道您正在使用 window 中的变量：

externals: {
  globalVar: path.resolve(path.join(__dirname, 'src/GlobalVarModule'))
}

在您的代码早期的某个地方：

globalVar = "my global var value";

用法：

import globalVar from 'globalVar';

console.log(globalVar);