Javascript 封装react组件库的正确方法？

现在，我正在开发一个React组件库，我希望通过npm将其交付给尽可能多的人。我使用

webpack

和

babel

包装和处理我的代码。然而，由于对

网页包

相当陌生，我不知道打包我的库的最佳方法是什么

我计划在

src

文件夹中创建一个单独组件的文件列表。我该如何包装它们，以便人们从npm获取？我的猜测是将它们单独输出，以便人们可以导入他们需要的任何东西。但是，我希望他们能够使用ES5（我认为这就是我安装的

es2015

预设的

babel

所做的）。我的档案如下：

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

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

在运行了

webpack

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

---

我试着在谷歌上搜索答案，但我发现（主要是）这些文章有点过时，并且/或者要求我使用一些

webpack

插件，我现在还不太习惯。我想知道我应该做什么，为什么。提前谢谢

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

关于githhub

详细介绍了github站点的概念

---

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

var webpack = require('webpack'); module.exports = { entry: { Component1: __dirname + '/src/Component1.js', Component2: __dirname + '/src/Component2.js', vendor: ['react'], }, output: { path: __dirname + '/dist', filename: '[name].js' }, module: { loaders: [{ test: /\.js$/, loader: 'babel-loader', query: { presets: ['react', 'es2015'] } }] } plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: Infinity }) ] }; var webpack=require（'webpack'）； module.exports={ 条目：{ Component1:uu dirname+'/src/Component1.js',， Component2:uu dirname+'/src/Component2.js',， 供应商：[“反应”]， }, 输出：{ 路径：uu dirname+'/dist'， 文件名：'[name].js' }, 模块：{ 装载机：[{ 测试：/\.js$/,， 加载器：“巴别塔加载器”， 查询：{ 预设：['react'，'es2015'] } }] } 插件：[ 新建webpack.optimize.commonChunkPlugin({ 名称：“供应商”， minChunks：无限 }) ] }; 您将获得一个文件vendor.js，其中将显示react

---

这里有更多细节

我在理解它的作用时遇到了一些困难。您能进一步解释一下吗？将js从Component1和Component2中排除到vendor.js文件中。Component1和Component2将是react上的唯一链接。它们都是很好的资源。据我所知，我实际上不需要webpack来构建包，我应该使用

babel

来实现这一点。同时，如果我决定暂时不使用测试，我不需要任何其他东西来编译我的组件库，除了

babel

和我正在使用的两个预设，对吗？不，你实际上不需要webpack，但没有理由不使用它。我建议您使用您熟悉的任何构建系统。npm软件包的重要之处在于确保package.json文件有一个主条目，指向导出的文件和/或在根目录中有一个index.js文件，然后可以导出，通常是lib或dist目录中的文件。您提到使用webpack会有很多开销，听起来您需要在生产模式下构建，尤其是react：再次感谢您的回答和澄清。经过深思熟虑，我可能会在发布前的最后一分钟才删除这个网页包，因为它给我带来了很多问题，并且由于内存问题而崩溃。如果我能用Babel构建和运行所有东西，直到我准备好发布，这对我来说非常好。

import React from 'react';


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

var webpack = require('webpack'); module.exports = { entry: { Component1: __dirname + '/src/Component1.js', Component2: __dirname + '/src/Component2.js', vendor: ['react'], }, output: { path: __dirname + '/dist', filename: '[name].js' }, module: { loaders: [{ test: /\.js$/, loader: 'babel-loader', query: { presets: ['react', 'es2015'] } }] } plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: Infinity }) ] };