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。

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

但是，我真的希望我的输出库仍然可以使用<script>标记的常规ES5，就像之前一样。这可能吗？

这是我的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;

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

Answer 2

Webpack发生了很大的变化，现在您可以获得与Felix Kling答案相同的结果，但是具有webpack配置。您应该在输出配置中添加 libraryExport 键，并将其设置为“默认” 。这会将您的主类设置为库的根目录内容。这是docs。

您的webpack配置应如下所示：

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

  output: {
    path: __dirname,
    filename: "./build/[name].js",
    libraryTarget: 'umd',
    libraryExport: 'default' //<-- New line
  },

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

导出Webpack和Babel的类不起作用

2 个答案: