Question

我正在设计一个JavaScript库，该库旨在作为<script>标签导入并公开全局，例如：

<script src="mapboard.js"></script>
<script>
  Mapboard({...});
</script>

我正在使用webpack进行捆绑和分发。我的配置如下：

module.exports = {
  entry: {
    lib: './src/main.js',
    vendor: [
      'leaflet',
      'vue',
      'vuex'
    ],
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: '[name].js',
    library: 'Mapboard'
  }

我想这样做，全局Mapboard只暴露了块lib。现在它出于某种原因（vuex）暴露了一个供应商库。有谁知道怎么做？

Answer 1

您不应该为库使用多个入口点。所有条目都将以相同的名称和最后加载的那些公开其出口，＆＃34;胜出＃34;。如果您确实需要多个库，则可以在[name]中使用output.library。

但看起来你似乎正在尝试实现其他目标，即不要将依赖项与库捆绑在一起。在这种情况下，您应该使用externals，这需要库的用户安装依赖项（如Vue）。这与peerDependencies对npm包的工作方式非常相似。有关更多信息，请阅读官方文档的Authoring Libraries Guide。

如果你想只制作一个开箱即用的库，你应该把它全部放在一个包/条目中。

webpack暴露错误的块作为库

1 个答案: