如何将 Webpack 构建的库公开为函数？答案

【问题标题】：How to expose Webpack-built library as function?如何将 Webpack 构建的库公开为函数？
【发布时间】：2017-03-10 18:48:37
【问题描述】：

我正在开发一个 JavaScript 库，它本质上是一个与 Vue 本身捆绑在一起的 Vue.js 组件。该项目是通过vue-cli 启动的，并使用Webpack 打包。

当这个库通过<script> 标记导入时，我希望它公开一个函数，例如：

Mapboard({div: '#some-div')

图书馆本身目前只是：

export default (opts) => console.log('hello')

我调整了我的 Webpack 配置以设置库名称：

module.exports = {
  output: {
    library: 'Mapboard'
  }
}

它成功地公开了一个名为Mapboard 的全局变量，但它是对象，而不是函数：

{
  __esModule: true,
  default: function (e) {...}
}

有什么方法可以阻止 Webpack 将其导出为 ES6 模块？我希望它只是模块导出的函数，如上所示。

【问题讨论】：

【解决方案1】：

对于 ES5 和 ES6，如果你使用 TypeScript 构建你的库，你可能需要额外的类型配置...

【讨论】：

【解决方案2】：

这篇文章帮助很大。解决这个问题的核心点是：

解决这个问题很简单：只需编写一个文件，以 ES6 方式导入这些 ES6 模块，但以 nodeJS module.exports 样式导出它们。然后 Webpack 会正确处理它们！

没错！只要把你的函数改成：

function foo(opts) {
  console.log('hello');
}
module.exports = foo;

一切都应该按预期工作。

注意：这样编写的代码可能行不通：

module.exports = function foo(opts) {
  console.log('hello');
}

【讨论】：