本教程详细阐述了如何在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
立即学习“Java免费学习笔记（深入）”；
export class TheClass {
constructor() {
console.log("TheClass has been instantiated!");
}
}index.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="../dist/bundled.js"></script>
<script>
new TheClass(); // 此时会抛出 ReferenceError
</script>
</body>
</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中使用：
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="../dist/bundled.js"></script>
<script>
// 现在可以通过 MyLibrary 命名空间访问 TheClass
new MyLibrary.TheClass(); // 正常工作
</script>
</body>
</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中使用：
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="../dist/bundled.js"></script>
<script>
// 现在可以直接通过类名访问 TheClass
new TheClass(); // 正常工作
</script>
</body>
</html>总结与注意事项
-
libraryTarget: 'umd' vs. library.type: 'window'：
- umd 提供了更广泛的兼容性，适用于你的库可能在多种JavaScript环境（浏览器、Node.js、AMD）中被消费的情况。它通常会将你的导出封装在一个命名空间对象下。
- window (或 global) 更直接，它会将你的导出直接挂载到全局对象上，适用于你只需要在浏览器环境中以全局变量形式使用的情况。这使得你可以直接通过类名访问。
导出语法： 确保你的TypeScript类是导出的（export class TheClass {} 或 export default class TheClass {}），这样Webpack才能识别并将其作为模块的导出内容。
tsconfig.json 配置： target 和 module 选项在 tsconfig.json 中影响TypeScript的编译结果。例如，"target": "ES5" 和 "module": "ES6" 是常见的配置，它们决定了TypeScript代码的JavaScript版本和模块系统。Webpack会在打包时处理这些模块。
devtool 选项： 在开发模式下，devtool: "inline-source-map" 等选项有助于调试，它能将打包后的JavaScript代码映射回原始的TypeScript源代码。
通过正确配置Webpack的output选项，你可以灵活地控制TypeScript类如何从打包后的JavaScript文件中暴露出来，以满足不同项目和使用场景的需求。
