CODEWITHSUNDEEP
javascriptreactjsnpmwebpackbabeljs
Angelos Chalaris
Angelos Chalaris

Reputation: 6747

Proper way to package a react component library?

Right now, I'm working on a React component library, which I want to deliver via npm to as many people as possible. I use webpack and babel for packaging and processing of my code. However, being fairly new to webpack, I don't know what the best way would be to go about packaging my library.

I'm planning to have a list of files in the src folder that will be individual components. How do I go about packaging them for people to grab from npm? My guess is to output them individually, so that people can import whatever they need. However, I want them to work with ES5 (which I think is what babel does with the es2015 preset which I have installed). My files are as follows:

webpack.config.js (a couple of things were removed for brevity)

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 (sample component, written to showcase an example)

import React from 'react';


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

After running through webpack, I get a huge file with lots of overhead code added by it, but, from what I can tell, the code is compiled to ES5, which is my intention. Is this the proper way to do this? Can I avoid the overhead added by webpack?

I tried googling for answers, but the articles I found (this and this mainly) were a bit outdated and/or required me to use some plugin for webpack, which I'm not very comfortable with yet. I'd like to understand what I should be doing and why. Thanks in advance!

Upvotes: 6

Views: 1993

Answers (2)

user7919529
user7919529

Reputation:

You can do as modules with vendors.

 

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

You get a file vendor.js where will be react

more detail here https://webpack.github.io/docs/code-splitting.html

Upvotes: 0

user4592495
user4592495

Reputation:

This is a great question and something that I agree should be covered a lot more. For your specific problem at hand:

  1. react-npm-boilerplate on githhub
  2. This article covers the idea of the github site in detail

Upvotes: 2

Related Questions