使用webpack访问TypeScript全局变量

Question

我是webpack的新手，正在将一个中等大小的TypeScript应用程序(没有框架(转换为使用它。我的main.ts文件中有一些全局变量无法访问。

// Global variables
let templates;
let router;
let config;
$(document).ready(() => {
$.get("/config", (data) => {
// Create our config object
config = new Config(data);
// Load all templates
templates = new Templates();
templates.ready(() => {
router = new Router();
router.initialize();
});
}
}

当我尝试从Router类访问templates时，它是未定义的。我的Router.ts文件中有declare var templates。我尝试了这个答案中的建议&这个答案(将它们放在globals.ts/globals.js文件中，并使用ProvidePlugin，但没有成功(

webpack.config.js-

plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
globals: path.resolve(__dirname, "./globals"),
}),
],

main.ts-

$(document).ready(() => {
$.get("/config", (data) => {
// Create our config object
globals.config = new Config(data);
// Load all templates
globals.templates = new Templates();
globals.templates.ready(() => {
globals.router = new Router();
globals.router.initialize();
});
}
}

globals.ts/js-

export let templates, pageManager, config;

我得到错误TS2304: Cannot find name 'globals'.

如果我添加import * as globals from "./globals"，它会编译，但我在浏览器控制台中得到以下错误-Uncaught TypeError: Cannot set property config of #<Object> which has only a getter

我此刻有点不知所措。访问这些全局对象的最佳方式是什么？

Answer 1

您可以将应用程序编写为Node.js应用程序，然后使用WebPack创建捆绑包。

这里有一个简单的例子。我假设所有输入文件都在一个目录中。应安装webpack、webpack-cli、ts-loader、typescript程序包。

globals.ts

export let foo = null;
export let bar = null;

index.ts

import * as globals from "./globals";
globals.foo = "foo";
globals.bar = "bar";
console.log(globals);

tsconfig.json

{
"compilerOptions": {
"target": "esnext",
"module": "commonjs"
}
}

webpack.config.js

let path = require("path");
module.exports = {
entry: "./index.ts",
module: {
rules: [
{
test: /.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
output: {
path: path.resolve(__dirname, "scripts"),
filename: "bundle.js"
},
mode: "development"
};