webpack 从多个入口文件导出类答案

【问题标题】：webpack export classes from multiple entry fileswebpack 从多个入口文件导出类
【发布时间】：2015-12-07 07:54:18
【问题描述】：

我正在使用 webpack 来捆绑一个供第三方使用的框架。这个框架应该公开多个 ES6 类。以模块化方式构建，我为每个文件编写了一个类。我想要做的是一起构建所有这些文件，并将它们捆绑在给定的“命名空间”下。示例：

apples.js export class Apples {...}
橙子.js export class Oranges {...}

webpack.config.js：

module.exports = {
  entry: ['./src/apples.js', './src/oranges.js'],
  output: {
    path: './dist',
    filename: 'fruit.js',
    library: 'Fruit',
    libraryTarget: 'umd'
  }
}

但是，如果我在浏览器中加载这个库并在控制台中输入Fruit，我只会在 Fruit 下看到 Oranges 对象。只有最后一个条目文件被暴露在库中。果然，webpack 文档确认了这种行为：

如果您传递一个数组：所有模块在启动时加载。最后一个是导出的。 http://webpack.github.io/docs/configuration.html#entry

我目前的解决方法是从一个文件中导出我的所有类，但它变得相当笨拙。

如何设置一个包含多个全部导出的条目文件的库？还是我在这里做错了什么？

【问题讨论】：

你是说你不想有一些索引文件来手动定义导出的内容吗？我没有完全跟随。
@loganfsmyth 这就是为什么我想知道我是否以错误的方式解决这个问题的部分原因。我只是尝试添加一个索引文件，在其中导入 Apples 和 Oranges，然后执行export { Apples, Oranges }。这似乎是一个可行的解决方案。
这是我所期望的方法。归根结底，模块有一些公共 API 和一些私有 API，而索引文件可以在中心位置定义它。
@JasonFarnsworth 如果你解决了问题，你能分享一下代码吗？
@ChemicalProgrammer 我刚刚得到了一个非常简单的 index.js 文件，它导入并重新导出了所有内容。 import PiMap from './pi-map'import PiWebService from './pi-web-service'export { PiMap, PiWebService }

标签： javascript ecmascript-6 webpack

【解决方案1】：

我认为您最好使用 entry.js 文件来指示您如何组织多个模块。

import Apples from './apples';
import Oranges from './oranges';

export {
    Apples,
    Oranges
};

顺便说一句，如果你不想自己编写这种愚蠢的代码，请使用 Gulp/Grunt 通过某种逻辑生成文件 'entry.autogenerated.js' 然后运行 webpack 并使用条目 'entry.autogenerated .js'。

【讨论】：

你能提供一个 grunt/gulp 的例子吗？