CODEWITHSUNDEEP
javascriptreactjswebpack
CSharp
CSharp

Reputation: 1486

How to manage/package dependencies in a reusable react library

I am creating my first reactjs library that uses material-ui and react-google-charts as well as a number of other 3rd party libraries. I'm using webpack (version 3.5.6) as my bundler and so far I have the following webpack.config.js file...

const webpack = require('webpack')
const path = require('path')

const BUILD_DIR = path.resolve(__dirname, 'lib')
const APP_DIR = path.resolve(__dirname, 'src')

const WebpackConfig = {

    entry: {
        app: APP_DIR + '/index.js',
    },
    output: {
        path: BUILD_DIR,
        filename: 'index.js',
        libraryTarget: 'umd',
        library: 'TestComponent'
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: /.js$/,
                exclude: /node_modules/,
                include : APP_DIR,
                options: {
                    presets: [ 'react', 'es2015', 'stage-2' ]
                }
            }
        ],
    },
}

// webpack production config.
if ( process.env.NODE_ENV === 'production' ) {

    WebpackConfig.externals = {
        'react': 'react',
        'react-dom': 'react-dom'
    }

    WebpackConfig.plugins = [
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            mangle: {
                screw_ie8: true,
            },
            compress: {
                warnings: false,
                screw_ie8: true
            },
            comments: false
        }),
    ]
}

module.exports = WebpackConfig

In production, I've marked react and react-dom as 'externals' because I don't want them to be bundled up in my library, it's safe to assume whatever project will be using this project will also have reactjs.

How do I deal with the other 3rd parties libraries which may or may not be present in whatever project is using this library? Should I exclude all 3rd party libraries from the bundle and if so how to ensure whatever project is using my library can find them?

Upvotes: 1

Views: 1817

Answers (1)

Aaqib
Aaqib

Reputation: 10370

I am assuming that you have package.json file and you have already installed required dependencies

One of the ways to deal with third party libraries is to create a separate file, I prefer adding all the 3rd party libraries to the array and giving it to the entry point like this (You can modify it accordingly ):

const VENDOR_LIBS = [ 'react', 'react-dom', 'react-router' ] 
  entry: {
    bundle: 'index.js',
    vendor: VENDOR_LIBS
  }

And to make sure whatever is in vendor , must not be included in bundle.js (Prevent Duplication) , you can make use of CommonsChunkPlugin inside plugins : 

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    }); ]

As this settting will be emitting two file so you can make use of [chunkhash] inside output object(You can modify it accordingly) : 

output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },

You can read more on Webpack Documentation Code Splitting

If you want to know more about npm dependencies , You can see npm-documentation

Upvotes: 1

Related Questions