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

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站点的思路

Answer 2

您可以作为模块与供应商合作。

var webpack = require('webpack'); 模块.exports = { 入口： { Component1: __dirname + '/src/Component1.js', Component2: __dirname + '/src/Component2.js', 供应商：['反应']， }, 输出： { 路径：__dirname + '/dist', 文件名：'[名称].js' }, 模块： { 装载机：[{ 测试：/\.js$/， 加载器：'babel-loader'， 询问： { 预设：['react', 'es2015'] } }] } 插件：[ 新的 webpack.optimize.CommonsChunkPlugin({ 名称：“供应商”， minChunks：无限 }) ] };

你会得到一个文件 vendor.js 来反应

更多细节在这里https://webpack.github.io/docs/code-splitting.html