打包反应组件库的正确方法？

Question

现在，我正在开发一个 React 组件库，我想通过 npm 将其交付给尽可能多的人。我使用webpackandbabel来打包和处理我的代码。然而，作为 的新手webpack，我不知道打包我的库的最佳方法是什么。

我计划在src文件夹中包含一个文件列表，这些文件将成为单独的组件。我该如何打包它们以供人们从 npm 获取？我的猜测是单独输出它们，以便人们可以导入他们需要的任何内容。但是，我希望它们能够与 ES5 一起使用（我认为这就是我安装的预设的babel作用）。es2015我的文件如下：

webpack.config.js（为简洁起见，删除了一些内容）

var webpack = require('webpack');

module.exports = {
    entry: {
        Component1: __dirname + '/src/Component1.js',
        Component2: __dirname + '/src/Component2.js'
    },
    output: {
            path: __dirname + '/dist',
            filename: '[name].js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
                    presets: ['react', 'es2015']
            }
        }]
    }
};

Component1.js（示例组件，编写用于展示示例）

import React from 'react';


export default class Component1 extends React.Component {
    render() {
    return React.createElement('p',{className : 'Component1'}, 'This is a test component.');
    }
}

运行完后webpack，我得到一个巨大的文件，其中添加了许多开销代码，但是，据我所知，代码被编译为 ES5，这就是我的意图。这是执行此操作的正确方法吗？我可以避免 webpack 增加的开销吗？

我尝试在谷歌上搜索答案，但我发现的文章（主要是这个和这个）有点过时和/或要求我使用一些插件webpack，我对此还不太满意。我想了解我应该做什么以及为什么。提前致谢！

Answer 1

这是一个很好的问题，我同意应该更多地讨论这一点。对于您手头的具体问题：

1. github 上的React-npm-boilerplate
2. 本文详细介绍了 github 站点的想法