Webpack 2：将变量暴露给全局上下文，并在同一个项目中使用它

Posted 2023-03-13

【中文标题】Webpack 2：将变量暴露给全局上下文，并在同一个项目中使用它

【英文标题】：Webpack 2: Expose variable to global context, and use it in same project

【发布时间】：2017-07-26 20:57:53

【问题描述】：

我正在尝试使用 Webpack 2 和 TypeScript 将对象公开给全局上下文。此变量需要可全局访问，因为它将从外部脚本接收命令和属性，因此它不能存在于其封闭的上下文中。

我看到了this question，它教我如何通过output.library 配置输出一个包。

这是我的 webpack.config 文件：

entry:
    fluxCapacitor: "./ts/main/fluxCapacitor.ts",
    control: "./ts/control/index.ts"
,

output:
    path: __dirname + "/js",
    filename: "[name].js",
    library: "[name]",
    libraryTarget: "var"
,

fluxCapacitor.ts 文件：

export default class Core
    constructor()
        console.log("Need more jiggawatts");
    

控制/index.ts 文件：

var myFlux = new (<any>window).fluxCapacitor.default();

我现在遇到的问题是fluxCapacitor 类是全局可用的，但实例myFlux 不是。现在myFlux 被困在控制上下文中，我无法使用浏览器控制台访问它。

我也尝试将变量添加到 window 对象，但 TypeScript 根本不允许：

window.myFlux = new (<any>window).fluxCapacitor.default();
// property 'myFlux' does not exist on type 'Window'

问题：

在 Webpack 的捆绑上下文之外，将变量公开到全局范围的最简单/最简单的方法是什么？

【参考方案1】：

对于一个类实例，只需执行与该类相同的操作——导出它：

myFlux.ts

import fluxCapacitor from './fluxCapacitor';

export default fluxCapacitor.default();

webpack.config.js

entry:
    ...
    myFlux: "./ts/main/myFlux.ts",
    ...
,

而myFlux 最终会出现在window 对象上。