我正在做一些Typescript项目，其输出（JS）将用于JavaScript项目（如插件）。像这样：
<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body><script src="../dist/bundled.js"></script><script>new TheClass()</script></body></html>
TheClass定义在Typescript文件中，该文件由Webpack转换为JavaScript（bundled.js）。tsconfig.js中的target为ES5，module项设置为ES6。
现在，它抛出这个错误：Uncaught ReferenceError: TheClass is not defined.
因此，我尝试在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', ///////////////////////////////// added this.library: 'MyLibrary', ///////////////////////////////// added this.filename: "bundled.js",path: path.resolve(__dirname, "dist"),},}
现在我可以像这样访问类：
new MyLibrary.TheClass()
我还需要提到的是，类是这样定义的（它是导出的）：
export class TheClass {}
好了，现在有三个问题：
1.还有别的办法吗？
1.如何访问类，如：TheClass()（而不是MyLibrary.TheClass()）
libraryTarget: 'umd'有什么帮助？
我也试过export default：
export default class TheClass {}
所以，我可以像这样使用这个类：
new MyLibrary()
没成功
2条答案
按热度按时间kq4fsx7k1#
问得好以下是根据我所知道的每个问题的答案：
还有别的办法吗？
不，我认为这是将您的模块代码导出到外部库的唯一方法。
如何访问类，如：TheClass（）（而不是MyLibrary. TheClass（））
您可以查看
window或global类型，网址为www.example.com，这可能适用于您的案例：https://webpack.js.org/configuration/output/#type-window which is likely to work for your case:libraryTarget是如何做到的：帮我？
umd是一个建议的模块，它被设计用于许多环境，如浏览器和节点，因此它应该作为模块在两个env上工作x3naxklr2#
找到了！我改了这个：
变成这样：
我还在Typescript文件中使用了export default：
现在，我可以做我想做的事：
尽管从逻辑上讲，我们的库的名称必须与我们的类的名称相同。所以，如果你改变了你的类名，记住也要改变库的名字。
如果有人知道如何防止库和类名之间的冲突，请对这个答案发表评论或给我发消息。谢谢