本教程详细阐述了如何在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
new TheClass(); // 此时会抛出 ReferenceError
为了解决这个问题，我们需要配置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中使用：
// 现在可以通过 MyLibrary 命名空间访问 TheClass new MyLibrary.TheClass(); // 正常工作
关于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中使用：
// 现在可以直接通过类名访问 TheClass new TheClass(); // 正常工作
总结与注意事项
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文件中暴露出来，以满足不同项目和使用场景的需求。
以上就是在Webpack中导出TypeScript类供JavaScript项目直接使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540191.html
微信扫一扫 
支付宝扫一扫 
