导出Webpack和Babel的类不起作用

Question

我有一个非常简单的Webpack和Babel设置用于一个小型库.

之前,我有以下架构来生成库的ES5版本:

module.exports.lib = (function () {
    /* private part of library here */

    return {
        ... /* public part of library here */
    }
})();

一切都运行良好,我甚至有一些ES6功能,如我的库内的箭头功能,一切正常.但是,我决定将这种方法改为ES6类,这样:

export default class Library {

}

现在,当我尝试做的时候:

var library = new Library();

我得到那个图书馆没有定义.即使只评估Library返回undefined.

所以我所做的是将使用该库的文件转换为ES6文件,import Library from 'libraryfile.js'然后再次运行.

但是,我真的很喜欢我的输出库仍然可以在普通的ES5中使用,<script>标签就像以前一样.这可能吗？

这是我的webpack配置文件:

module.exports = {
  entry: {
    pentagine: "./lib/pentagine.js",
    demos: ["./demos/helicopter_game/PlayState.js"]
  },

  output: {
    path: __dirname,
    filename: "./build/[name].js",
    libraryTarget: 'umd'
  },

  module: {
    loaders: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
};

Answer 1

默认导出存储在default模块的属性中.如果您希望在无需用户知道的情况下访问您的库,您可以将您的webpack条目文件更改为

module.exports = require('./libraryfile').default;

另外,请确保您library: 'YourLibraryName'的webpack配置符合webpack.github.io/docs/configuration.html#output-library.