Webpack导出TS类给JS使用教程

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《Webpack导出TS类供JS使用方法》，涉及到，有需要的可以收藏一下

本教程详细阐述了如何在Webpack配置中，通过`output.library`和`output.library.type`（或`output.libraryTarget`）选项，将TypeScript项目编译并打包的JavaScript代码，以库的形式暴露给外部纯JavaScript环境。文章涵盖了两种主要方式：通过UMD模块暴露为命名空间对象，以及直接将类暴露到全局作用域，旨在解决在HTML页面中直接使用打包后的TypeScript类时遇到的`ReferenceError`问题。

问题概述

在TypeScript项目中，当我们将代码编译并使用Webpack打包成一个JavaScript文件（例如bundled.js），并尝试在普通的HTML页面中直接使用其中定义的类时，常常会遇到Uncaught ReferenceError: TheClass is not defined的错误。这通常是因为Webpack默认的打包方式是为了模块化环境（如CommonJS, ES Modules）设计的，它会将模块内容封装起来，而不是直接暴露到全局作用域。

例如，在以下场景中：

src/main.ts

export class TheClass {
    constructor() {
        console.log("TheClass has been instantiated!");
    }
}

index.html

为了解决这个问题，我们需要配置Webpack的output选项，明确告诉它如何将打包后的代码作为库导出。

解决方案一：使用UMD模块暴露为命名空间对象

一种通用的方法是使用libraryTarget: 'umd'和library选项，将你的模块导出为一个UMD（Universal Module Definition）库。UMD模块旨在兼容多种环境，包括浏览器全局变量、CommonJS和AMD。

当设置为UMD时，你需要为你的库指定一个全局名称。这样，你的类将作为这个全局名称下的一个属性被访问。

Webpack配置 (webpack.config.js)

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'：告诉Webpack生成一个UMD格式的库。这意味着你的库可以在浏览器环境（通过全局变量）、Node.js环境（通过require）或AMD环境（通过define）中使用。
• library: 'MyLibrary'：定义了在浏览器环境中，你的库将通过window.MyLibrary访问。

在HTML中使用：

关于export default： 如果你在TypeScript文件中使用export default class TheClass {}，并且Webpack配置中library: 'MyLibrary'，那么MyLibrary本身将是这个默认导出的类。此时，你可以直接通过new MyLibrary()来实例化该类，而无需通过MyLibrary.TheClass。

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

如果你希望直接通过类名（例如TheClass）来访问你的类，而不是通过一个命名空间（例如MyLibrary.TheClass），你可以使用output.library.type选项并将其设置为'window'或'global'。这将直接在浏览器（window）或Node.js（global）的全局对象上创建一个与你的类名相同的变量。

Webpack配置 (webpack.config.js)

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: {
            name: 'TheClass', // 直接将类名作为全局变量名
            type: 'window',   // 将其暴露到 window 对象上
        },
        filename: "bundled.js",
        path: path.resolve(__dirname, "dist"),
    },
};

解释：

• library.name: 'TheClass'：指定了在全局作用域中访问你的类的名称。
• library.type: 'window'：告诉Webpack将你的模块（这里是TheClass）直接赋值给window.TheClass。如果你在Node.js环境中使用，可以使用'global'。

在HTML中使用：

总结与注意事项

1. libraryTarget: 'umd' vs. library.type: 'window'：

   • umd 提供了更广泛的兼容性，适用于你的库可能在多种JavaScript环境（浏览器、Node.js、AMD）中被消费的情况。它通常会将你的导出封装在一个命名空间对象下。
   • window (或 global) 更直接，它会将你的导出直接挂载到全局对象上，适用于你只需要在浏览器环境中以全局变量形式使用的情况。这使得你可以直接通过类名访问。

2. 导出语法： 确保你的TypeScript类是导出的（export class TheClass {} 或 export default class TheClass {}），这样Webpack才能识别并将其作为模块的导出内容。

3. tsconfig.json 配置： target 和 module 选项在 tsconfig.json 中影响TypeScript的编译结果。例如，"target": "ES5" 和 "module": "ES6" 是常见的配置，它们决定了TypeScript代码的JavaScript版本和模块系统。Webpack会在打包时处理这些模块。

4. devtool 选项： 在开发模式下，devtool: "inline-source-map" 等选项有助于调试，它能将打包后的JavaScript代码映射回原始的TypeScript源代码。

通过正确配置Webpack的output选项，你可以灵活地控制TypeScript类如何从打包后的JavaScript文件中暴露出来，以满足不同项目和使用场景的需求。

本篇关于《Webpack导出TS类给JS使用教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！