Question

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

在我尝试创建我的班级的新实例之前，一切都很好：

未捕获的ReferenceError：未定义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"]
  }
};

的index.html：

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

我已经尝试过能够在其他地方使用图书馆的所有想法，但没有任何帮助...

我在哪里做错了？

Answer 1

使用webpack时，必须使用import / export来使用库中的类。全局无法访问类（至少在默认情况下不可访问）。

如果你想无论如何全局使用这个类，你应该在你的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的文件或项目中导入lib，而不是将其写入HTML文件本身。

无论哪种方式，都不要忘记将index default添加到index.js文件中：

export default mylib;

导入我自己的库：未捕获的ReferenceError：未定义mylib

1 个答案: