Webpack打包TS生成JS后如何使用类及相关技术疑问

问题背景 #

我正在开发一个TypeScript项目，编译后的JS文件需作为插件在JavaScript项目中使用。示例HTML代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <script src="../dist/bundled.js"></script>
        <script>
            new TheClass()
        </script>
    </body>
</html>

其中TheClass定义在TypeScript文件中，通过Webpack编译为bundled.js。tsconfig.js配置target: ES5、module: ES6，此时浏览器报错：Uncaught ReferenceError: TheClass is not defined.

添加Webpack的library配置后：

const path = require("path")

module.exports = {
    mode: "development",
    entry: "./src/main.ts",
    devtool: "inline-source-map",
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                include: path.resolve(__dirname, "src"),
                use: "ts-loader",
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    output: {
        libraryTarget: 'umd',
        library: 'MyLibrary',
        filename: "bundled.js",
        path: path.resolve(__dirname, "dist"),
    },
}

可通过new MyLibrary.TheClass()访问类（类定义为export class TheClass {}）；尝试export default class TheClass {}后，无法通过new MyLibrary()访问。

问题解答 #

1. 是否有其他实现方式？ #

• window全局挂载方案：将Webpack的libraryTarget设为window，直接把类绑定到浏览器的window对象，无需通过自定义库名访问。
• ES模块模式：将Webpack的output.libraryTarget设为module，HTML中用<script type="module" src="../dist/bundled.js"></script>引入，TS中用export导出，HTML脚本里通过import语句导入使用。
• 手动全局挂载：在TS文件末尾直接将类挂载到window：(window as any).TheClass = TheClass，无需配置Webpack的library选项，适合简单场景。

2. 如何直接以new TheClass()的方式访问该类？ #

有两种可靠方案：

方案一：Webpack配置全局挂载

修改Webpack的output配置，直接将类绑定到window全局对象：

output: {
    libraryTarget: 'window',
    library: 'TheClass',
    libraryExport: 'TheClass', // 若为命名导出需指定成员，默认导出可省略
    filename: "bundled.js",
    path: path.resolve(__dirname, "dist"),
}

如果TS中是默认导出export default class TheClass {}，可去掉libraryExport，编译后TheClass会直接成为全局变量，即可直接调用new TheClass()。

方案二：手动挂载到window

在TS文件中添加全局挂载代码：

export class TheClass {}
// 挂载到浏览器全局window对象
(window as any).TheClass = TheClass;

编译后TheClass会成为全局变量，直接调用即可，无需修改Webpack配置。

3. libraryTarget: 'umd'的作用是什么？ #

UMD（Universal Module Definition）是一种通用模块格式，能让你的代码兼容多种运行环境：

• 浏览器环境中，库会挂载到全局对象（如window）；
• CommonJS环境（如Node.js）中，可通过require()导入；
• AMD环境中，可通过define()导入。
  它的核心作用是让同一份打包代码同时支持全局变量、CommonJS、AMD三种模块系统，无需为不同环境单独打包，提升了代码的通用性。

内容的提问来源于stack exchange，提问作者Arshaan