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

Question

我正在开发一个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模块？我希望它只是模块导出的功能，如上所示。

Answer 1

看看这篇webpack 2官方文章：https://webpack.js.org/guides/author-libraries/

对于ES5和ES6，如果使用TypeScript构建库，则可能需要额外配置以进行打字...

Answer 2

http://siawyoung.com/coding/javascript/exporting-es6-modules-as-single-scripts-with-webpack.html

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

  

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

那是对的！只需将您的功能更改为：

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

一切都应该按预期工作。

注意：这样的代码写入可能不起作用：

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