webpack从多个条目文件导出类

时间:2015-09-10 21:25:37

标签: javascript ecmascript-6 webpack

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

apples.js export class Apples {...}
oranges.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

我目前的解决方法是从一个文件导出我的所有类,但它变得非常笨拙。

如何设置包含所有导出的多个条目文件的库?或者我在这里做错了什么?

1 个答案:

答案 0 :(得分:1)

我认为你最好使用entry.js文件来表明你如何组织你的几个模块。

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

export {
    Apples,
    Oranges
};

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