使用 Webpack 和 Babel 导出类不起作用答案

【问题标题】：Exporting a class with Webpack and Babel not working使用 Webpack 和 Babel 导出类不起作用
【发布时间】：2016-06-19 23:25:29
【问题描述】：

我有一个非常简单的 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']
        }
      }
    ]
  }
};

【问题讨论】：

“但是，我真的希望我的输出库仍然是有效的 ES5。这可能吗？” Babel 已经做到了...
@FelixKling 是的，它是有效的 ES5，但我的意思是我希望它可以被带有普通脚本标签的常规 ES5 代码使用。我将编辑问题。
这可能会有所帮助：stackoverflow.com/q/33678869/218196
这对我有所帮助，因为我学到了很多东西，但它似乎与使用 add-module-exports 插件无法解决问题的问题不同。
你解决了这个问题我也面临同样的错误吗？

标签： javascript ecmascript-6 webpack babeljs

【解决方案1】：

默认导出存储在模块的default 属性中。如果你想让你的库无需用户知道就可以访问，你可以将你的 webpack 入口文件更改为

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

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

【讨论】：

听起来很公平，所以我创建了一个entry.js，它的唯一代码是module.exports = require('./pentagine.js').default;。我将 webpack 中的入口文件更改为entry.js，但仍然未定义。
pentagine.js 有默认导出吗？
是的，export default class Pentagine 就是这样。（你可以在这里看到它github.com/davidgomes/pentagine.js/tree/es6-version）
我猜你的 webpack 配置中还需要 library: 'YourLibraryName'。 webpack.github.io/docs/configuration.html#output-library
library: 'YourLibraryName' 在 webpack 4 中被移除

【解决方案2】：

Webpack 发生了很大变化，现在您可以获得与 Felix Kling 答案相同的结果，但需要使用 webpack 配置。您应该在输出配置中添加 libraryExport 键并将其设置为 "default"。这会将您的主类设置为库的根内容。这是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']
        }
      }
    ]
  }
};

【讨论】：

【解决方案3】：

正如 Matias 指出的那样，必须将 webpack 配置为导出默认值，以避免您的客户端代码执行 const MyLibrary = require('MyLibrary').default

2021 年，使用 webpack 5，正确的配置是：

module.exports = {
    
    output: {
        filename: '[name].bundle.js',
        library: {
            name: 'MyLibrary',
            type: 'umd',
            export: 'default' //<--- important
        },
    },

    // specify entry and other configs per usual..
}

参考：https://webpack.js.org/configuration/output/#outputlibraryexport

【讨论】：