本文详细探讨了在Webpack打包TypeScript项目时，如何将生成的JavaScript类作为外部库在其他JavaScript环境中使用。我们将介绍两种主要的配置方式：通过UMD（Universal Module Definition）暴露命名空间下的类，以及直接将类挂载到全局对象（如`window`）下，实现更便捷的访问。同时，文章还将解释`libraryTarget`的作用，并提供相应的Webpack配置示例。
引言：Webpack与TypeScript模块的外部化
在现代前端开发中，将TypeScript项目编译为JavaScript，并通过Webpack进行打包，以便在独立的JavaScript环境（例如，作为插件或独立脚本）中使用，是一个常见需求。然而，直接将TypeScript中导出的类打包后，在外部HTML或JS文件中可能会遇到ReferenceError: TheClass is not defined的问题。这通常是因为Webpack默认的打包方式是为了模块化环境设计的，并不会将内部模块的导出直接暴露到全局作用域。为了解决这个问题，我们需要利用Webpack的output配置选项，特别是library和libraryTarget。
解决方案一：通过UMD模式暴露命名空间下的类
UMD（Universal Module Definition）是一种通用的模块定义模式，旨在兼容多种模块环境，包括浏览器全局变量、CommonJS和AMD。通过将libraryTarget设置为umd，我们可以将打包后的代码作为一个兼容性极强的库导出。
配置Webpack
在webpack.config.js中，您需要修改output配置，添加libraryTarget和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', // 指定库的导出目标为UMD
library: 'MyLibrary', // 定义库的全局名称
filename: "bundled.js",
path: path.resolve(__dirname, "dist"),
},
};TypeScript类定义
确保您的TypeScript类是显式导出的：
// src/main.ts
export class TheClass {
constructor() {
console.log("TheClass instance created!");
}
greet() {
return "Hello from TheClass!";
}
}在外部HTML/JS中使用
经过上述配置，Webpack会将您的模块打包到一个名为MyLibrary的全局对象下。您可以通过该对象访问导出的类：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="../dist/bundled.js"></script>
<script>
// 现在可以通过 MyLibrary 命名空间访问 TheClass
const instance = new MyLibrary.TheClass();
console.log(instance.greet()); // 输出: Hello from TheClass!
</script>
</body>
</html>libraryTarget: 'umd'的作用：umd是一种“通用模块定义”，它会生成一段包裹代码，使得您的库能够检测当前运行环境（例如，是否是Node.js环境，是否支持AMD或CommonJS），并以最适合该环境的方式导出模块。在浏览器环境中，它通常会将您的库挂载到window对象上，并使用library选项指定的名字作为其属性名。因此，MyLibrary会在浏览器全局作用域中可用。
解决方案二：直接挂载到全局对象（window或global）
如果您希望直接在全局作用域中访问类，而不需要通过一个命名空间（例如，直接new TheClass()而不是new MyLibrary.TheClass()），可以使用output.library.type选项。
配置Webpack
为了实现直接全局访问，我们需要调整output.library配置，使用对象形式并指定type和name：
const path = require("path");
module.exports = {
// ... 其他配置保持不变 ...
output: {
library: {
name: 'TheClass', // 直接将导出的类命名为 TheClass
type: 'window', // 或 'global'，将库挂载到 window 或 global 对象上
},
filename: "bundled.js",
path: path.resolve(__dirname, "dist"),
},
};注意：
- type: 'window'适用于浏览器环境，会将您的模块挂载到window对象上。
- type: 'global'适用于Node.js环境，会将模块挂载到global对象上。
- name选项在这里直接指定了在全局作用域中访问的名称。
TypeScript类定义
同样，确保您的TypeScript类是显式导出的。如果您的main.ts只导出了一个类，并且您希望它直接成为全局的TheClass，那么Webpack会尝试将该模块的默认导出或唯一的命名导出作为TheClass。
// src/main.ts
export class TheClass { // 确保这是您希望直接全局访问的类
constructor() {
console.log("Direct global TheClass instance created!");
}
sayHello() {
return "Hello directly from TheClass!";
}
}在外部HTML/JS中使用
现在，您可以直接在全局作用域中访问TheClass：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="../dist/bundled.js"></script>
<script>
// 直接访问 TheClass
const directInstance = new TheClass();
console.log(directInstance.sayHello()); // 输出: Hello directly from TheClass!
</script>
</body>
</html>关于export default的注意事项
当您在TypeScript中使用export default class TheClass {}时，这个类成为了模块的默认导出。如果您的Webpack配置是：
output: {
libraryTarget: 'umd',
library: 'MyLibrary',
filename: "bundled.js",
path: path.resolve(__dirname, "dist"),
}那么在外部，您将通过MyLibrary.default来访问这个默认导出的类，或者如果MyLibrary本身就是这个默认导出的类，则可以直接new MyLibrary()。
例如，如果src/main.ts内容如下：
export default class MyDefaultClass {
constructor() {
console.log("MyDefaultClass instance created!");
}
}并且Webpack配置如上，那么在HTML中您可能需要这样访问：
<script>
// 假设 MyLibrary 捕获了默认导出
const instance = new MyLibrary(); // 尝试直接实例化 MyLibrary
// 或者
// const instance = new MyLibrary.default(); // 如果 MyLibrary 是一个包含 default 属性的对象
</script>实际行为取决于Webpack如何处理export default与library名称的映射。通常情况下，如果您希望直接new MyLibrary()，那么main.ts应该只包含一个export default，并且这个默认导出本身就是您要实例化的类。如果您的main.ts包含多个导出，并且其中一个是默认导出，那么MyLibrary将成为一个对象，其属性包含所有导出（包括default）。
总结与最佳实践
- 明确导出策略： 在TypeScript中，确保您希望外部使用的类是export的。
-
选择合适的libraryTarget：
- umd： 推荐用于需要广泛兼容性（浏览器、Node.js、AMD、CommonJS）的场景。它会创建一个全局命名空间（由output.library指定），您的类将作为该命名空间的属性。
- window / global： 如果您确定目标环境是浏览器或Node.js，并且希望直接将类挂载到全局作用域（如window.TheClass），则可以使用output.library.type: 'window'（或'global'）配合output.library.name。
- devtool配置： devtool: "inline-source-map"在开发模式下非常有用，它允许您在浏览器中调试TypeScript源代码，即使它已经被打包成了JavaScript。
- tsconfig.json： 尽管不是直接解决此问题的关键，但target: "ES5"和module: "ES6"的配置对于兼容性和模块化构建仍然重要。target决定了编译后的JavaScript语法级别，module决定了TypeScript如何解析和生成模块代码。
通过上述Webpack配置，您可以灵活地控制TypeScript生成的类如何作为独立的JavaScript库被外部环境所使用，从而实现更强大的模块化和可重用性。
