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

【问题标题】：Webpack 2: Expose variable to global context, and use it in same projectWebpack 2：将变量暴露给全局上下文，并在同一个项目中使用它
【发布时间】：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 的捆绑上下文之外，将变量公开到全局范围的最简单/最简单的方法是什么？

【问题讨论】：

标签： javascript typescript webpack webpack-2

【解决方案1】：

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

myFlux.ts

import fluxCapacitor from './fluxCapacitor';

export default fluxCapacitor.default();

webpack.config.js

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

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

【讨论】：