javascript - 打包 react 组件库的正确方法？

Question

现在，我正在开发一个 React 组件库，我想通过 npm 将其交付给尽可能多的人。我使用 webpack 和 babel 来打包和处理我的代码。但是，作为 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 增加的开销吗？

我尝试用谷歌搜索寻找答案，但我找到的文章(主要是 this 和 this)有点过时和/或要求我为 webpack 使用一些插件，我我还不太舒服。我想了解我应该做什么以及为什么。提前致谢!

Answer 1

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

1. react-npm-boilerplate在 github 上
2. This article详细介绍了 github 站点的概念