Javascript 导入我自己的库：未捕获引用错误：未定义mylib_Javascript_Webpack

Javascript 导入我自己的库：未捕获引用错误：未定义mylib

javascript webpack

Javascript 导入我自己的库：未捕获引用错误：未定义mylib,javascript,webpack,Javascript,Webpack,我正在尝试学习如何编写一个小型库，以便在我的项目中导入。我正在使用Webpack进行捆绑在我尝试创建类的新实例之前，一切正常：未捕获引用错误：未定义mylib 我的图书馆： class mylib { constructor(input) { this.sayHello(input) } sayHello(name) { console.log('Hello ' + name); } } 网页包配置： module.exports = { entry:

我正在尝试学习如何编写一个小型库，以便在我的项目中导入。我正在使用Webpack进行捆绑

在我尝试创建类的新实例之前，一切正常：

未捕获引用错误：未定义mylib

我的图书馆：

class mylib {
  constructor(input) {
    this.sayHello(input)
  }

  sayHello(name) {
    console.log('Hello ' + name);
  }
}

网页包配置：

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: './mylib.js',
    path: __dirname + '/dist'
  },
  resolve: {
    extensions: [".js"]
  }
};

Index.html：

<script type="text/javascript" src="dist/mylib.js"></script>
<script>
  (function() {
    var test = new mylib('myname');
  })();
</script>
<body>
<pre>...</pre>
</body>


（功能（）{
var测试=新的mylib（“myname”）；
})();
...

为了能在其他地方使用图书馆，我已经尝试了我能想到的一切，但是没有任何帮助

我哪里做错了？

使用webpack时，必须使用导入/导出来使用库中的类。类将无法全局访问（至少默认情况下不会）

如果你想全局使用这个类，你应该在你的网页配置中添加如下内容：（如上所示）

但是，我建议将lib导入另一个使用webpack的文件或项目中，而不是将其写入HTML文件本身

无论哪种方式，都不要忘记将导出默认值添加到index.js文件中：

output: {
    // export itself to a global var
    libraryTarget: "var",
    // name of the global var: "mylib"
    library: "mylib"
}

export default mylib;