我正在尝试学习如何编写一个小库以导入我的项目中。我正在使用 Webpack 进行捆绑。
一切都很好，直到我尝试创建类的新实例：
未捕获的引用错误：未定义 mylib
我的图书馆：
class mylib {
constructor(input) {
this.sayHello(input)
}
sayHello(name) {
console.log('Hello ' + name);
}
}
Webpack 配置：
module.exports = {
entry: "./src/index.js",
output: {
filename: './mylib.js',
path: __dirname + '/dist'
},
resolve: {
extensions: [".js"]
}
};
索引.html：
<script type="text/javascript" src="dist/mylib.js"></script>
<script>
(function() {
var test = new mylib('myname');
})();
</script>
<body>
<pre>...</pre>
</body>
我已经尝试了几乎所有我能想到的能够在其他地方使用图书馆，但没有任何帮助......
我哪里做错了？
使用webpack 时，您必须使用导入/导出来使用库中的类。类将无法全局访问(至少默认情况下不可访问(。
如果你想全局使用这个类，你应该在你的 webpack 配置中添加这样的东西：(如 https://webpack.github.io/docs/library-and-externals.html 所示(
output: {
// export itself to a global var
libraryTarget: "var",
// name of the global var: "mylib"
library: "mylib"
}
但是，我建议将库导入到另一个使用 webpack 的文件或项目中，而不是将其写入 HTML 文件本身。
无论哪种方式，都不要忘记将导出默认值添加到索引.js文件：
export default mylib;