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

这是一个很好的问题，我同意的事情应该涵盖得更多。针对您手头的具体问题：

react-npm-boilerplate在githhub上
This article详细介绍了github网站的想法

Answer 2

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

 

    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
            })
        ]
    };

你得到一个文件vendor.js将在哪里做出反应

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

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

2 个答案: