使用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 没有被定义。甚至仅评估 Library 也会返回 undefined。

所以我把使用该库的文件转换成了一个 ES6 文件，使用 import Library from 'libraryfile.js' ，然后它又可以工作了。

但是，我真的希望我的输出库仍然可以像之前一样使用 <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']
        }
      }
    ]
  }
};

- David Gomes

---

“然而，我真的希望我的输出库仍然是有效的ES5。这可能吗？”Babel已经可以做到了...” - Felix Kling

@FelixKling 是的，它是有效的 ES5 代码，但我的意思是我希望它可以通过普通的脚本标签被常规的 ES5 代码使用。我会编辑问题。 - David Gomes

这可能会有所帮助：https://dev59.com/gFwX5IYBdhLWcg3wjgCf - Felix Kling

它对我有所帮助，因为我学到了很多东西，但似乎并不是同样的问题，因为使用“add-module-exports”插件并没有解决问题。 - David Gomes

你解决了这个问题吗？我也遇到了相同的错误。 - jax

Answer 1

默认导出存储在模块的default属性中。如果你希望让用户能够轻松使用你的库，而不需要了解这一点，你可以将webpack入口文件更改为

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

同时，请确保你的 webpack 配置文件中有 library: 'YourLibraryName'，参考webpack.github.io/docs/configuration.html#output-library。

- Felix Kling

---

听起来很公平，所以我创建了一个 entry.js 文件，它的唯一代码是 module.exports = require('./pentagine.js').default;。我在 webpack 中更改了入口文件为 entry.js，但仍然得到未定义的结果。 - David Gomes

pentagine.js 是否有默认导出？ - Felix Kling

是的，它已经有了，“export default class Pentagine”就是它。 （您可以在此处查看https://github.com/davidgomes/pentagine.js/tree/es6-version） - David Gomes

我猜你的 webpack 配置中也需要加入 library: 'YourLibraryName'。参考链接：http://webpack.github.io/docs/configuration.html#output-library - Felix Kling

在webpack 4中，library: 'YourLibraryName'已被移除。 - Talha Junaid

Answer 2

Webpack 已经发生了很多改变，现在你可以通过 webpack 配置获得与 Felix Kling 回答相同的结果。在输出配置中添加 libraryExport 键并将其设置为 "default"。这将把你的主类设置为库的根内容。这里是文档。

你的 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']
        }
      }
    ]
  }
};

- Matias Perez

Answer 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

该配置项用于指定将哪些模块导出为库。默认情况下，Webpack 会将入口起点的返回值作为库暴露出去。但是，如果你想要暴露其他模块或者变量，可以使用这个选项。

- lance.dolan