Webpack打包TS到全局作用域的技巧与方法

你在学习文章相关的知识吗？本文《Webpack打包TS类到全局作用域的方法与技巧》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

本文深入探讨了在Webpack中将TypeScript编译并打包为JavaScript文件后，如何有效地将其中定义的类暴露给外部JavaScript环境。文章详细介绍了通过`output.library`配置实现模块命名空间化（如UMD）和直接全局暴露两种主要方法，并提供了相应的Webpack配置示例和使用场景，旨在帮助开发者解决`ReferenceError`问题，实现类在外部脚本中的顺利调用。

Webpack中暴露TypeScript类的策略与实践

在现代前端开发中，使用TypeScript编写模块并利用Webpack进行打包已成为常态。然而，当我们需要将这些打包后的JavaScript文件作为一个“插件”或库，供其他独立的JavaScript脚本直接调用其中定义的类时，可能会遇到Uncaught ReferenceError: TheClass is not defined这样的错误。这通常是因为Webpack默认会将模块封装起来，防止全局污染，导致外部脚本无法直接访问内部导出的类。本文将详细介绍如何通过Webpack的output配置来解决这一问题，实现TypeScript类的有效暴露。

理解问题根源

当我们在TypeScript文件中定义并导出一个类，例如：

// src/main.ts
export class TheClass {
    constructor() {
        console.log("TheClass instantiated!");
    }
}

并使用Webpack将其打包成bundled.js。如果直接在HTML中尝试实例化这个类：

TheClass无法被识别，因为Webpack将TheClass封装在其模块作用域内，并未将其暴露到全局或任何可访问的命名空间。

解决方案一：通过命名空间暴露模块 (UMD)

一种常见的做法是将整个打包文件作为一个库暴露出去，并为其指定一个全局的命名空间。这可以通过Webpack的output.library和output.libraryTarget配置实现。

配置Webpack

在webpack.config.js中，我们需要在output部分添加library和libraryTarget：

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', // 指定库的输出格式为 UMD
        library: 'MyLibrary', // 指定全局变量的名称
        filename: "bundled.js",
        path: path.resolve(__dirname, "dist"),
    },
};

配置解析：

• libraryTarget: 'umd'：UMD (Universal Module Definition) 是一种通用模块定义格式，旨在兼容多种模块环境，包括浏览器（通过全局变量）、Node.js (CommonJS) 和 RequireJS (AMD)。它使得你的打包文件在不同环境中都能被正确加载。
• library: 'MyLibrary'：当libraryTarget设置为umd时，library属性定义了在浏览器环境中暴露的全局变量名称。所有导出的模块内容都将作为这个全局变量的属性。

HTML中使用

配置完成后，在HTML中可以通过MyLibrary这个全局对象来访问TheClass：

这种方法的好处是避免了全局变量冲突，将所有导出的内容封装在一个命名空间下。

解决方案二：直接将类暴露到全局作用域

如果希望像TheClass()这样直接访问类，而不需要通过额外的命名空间（如MyLibrary.TheClass()），可以将类直接暴露为全局变量。这可以通过output.library配置的name和type属性实现。

配置Webpack

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: {
        // 使用 library 对象配置，更灵活
        library: {
           name: 'TheClass', // 指定全局变量的名称，这里直接使用类名
           type: 'window',   // 指定暴露到 window 对象，也可以是 'global' (Node.js)
        },
        filename: "bundled.js",
        path: path.resolve(__dirname, "dist"),
    },
};

配置解析：

• library.name: 'TheClass'：指定要暴露到全局的变量名称。
• library.type: 'window'：告诉Webpack将导出的模块绑定到浏览器环境的window对象上。这意味着TheClass将成为window.TheClass，从而可以直接通过TheClass访问。'global'适用于Node.js环境。

HTML中使用

现在，TheClass可以直接在全局作用域中访问：

注意事项： 这种直接暴露到全局作用域的方式简单直接，但需要注意可能存在的全局变量冲突问题，尤其是在大型项目或集成多个第三方库时。

关于 export default 的考量

当使用export default class TheClass {}来导出类时，行为会有所不同。export default意味着模块只有一个默认导出。

如果使用output.library: 'MyLibrary'（或library: { name: 'MyLibrary', type: 'umd' }），那么MyLibrary这个全局变量将直接是TheClass的构造函数本身。因此，你可以直接通过new MyLibrary()来实例化这个默认导出的类，而不是new MyLibrary.TheClass()。

// src/main.ts
export default class TheClass { // 使用 default 导出
    constructor() {
        console.log("Default TheClass instantiated!");
    }
}

此时，如果Webpack配置为library: 'MyLibrary'，则HTML中的使用方式将变为：

理解export default和命名导出的区别对于正确配置Webpack并按预期访问导出的类至关重要。

总结与最佳实践

在Webpack中将TypeScript类暴露给外部JavaScript环境，主要依赖于output.library配置。

1. 命名空间暴露 (UMD)：通过output.libraryTarget: 'umd'和output.library: 'MyLibrary'，可以将所有导出的内容封装在MyLibrary命名空间下，适合作为通用库使用，避免全局冲突。
2. 直接全局暴露：通过output.library: { name: 'TheClass', type: 'window' }，可以将特定的类直接暴露为全局变量，方便直接访问，但需注意潜在的全局冲突。
3. export default的影响：当使用export default时，library指定的全局变量将直接代表该默认导出，而不是一个包含导出内容的命名空间对象。

选择哪种方式取决于你的具体需求和对全局作用域污染的容忍度。对于开发通用库或插件，建议使用命名空间暴露；对于简单的脚本或特定场景，直接全局暴露可能更为便捷。务必确保你的TypeScript类是export的，以便Webpack能够识别并处理它们。

本篇关于《Webpack打包TS到全局作用域的技巧与方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！