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();
        });
    }
}

当我尝试从templates类访问Router时，它是未定义的。我的declare var templates文件中有Router.ts。我尝试了this answer和this answer中的建议（将它们放入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"
};

使用Webpack访问TypeScript全局变量

1 个答案: