Sign in
Log inSign up

Need help with my first Open Source Project

Cody Brunner's photo
Cody Brunner
·Mar 3, 2017

I'm trying to get started on writing my first open source project which happens to be a React Component. I've really been struggling understanding webpack when it comes to outputting the code for npm. I've been looking at other react-component projects most of the day and looking at the React & Redux repositories as well to try and glean what it going on. What I understand so far is:

  1. I should have a directory in which I am building the files; in my case I have made this src/
  2. This will be my entry for webpack.
  3. The output will be another directory I decided to go with lib/ and I declare a filename: 'index.js'
  4. My entry for npm needs to be "main" in the package.json so in my case "main": "lib/index.js"

Areas I'm getting super confused on:

  1. Do I need to declare a filename or just output to my lib/ ?
  2. In the package.json what is "file" doing? Seems like the files listed in the array are outputs for npm.
  3. What is libraryTarget & library doing in the webpack.config? I continually see libraryTarget: 'umd' and I believe what it means is that it will build according to _universal module definition_.

My webpack as it stands at the moment looks like this (I have webpack-dev-server here because this is the development config for getting up and running):

'use strict';

const webpack = require('webpack');
const { join } = require('path');

module.exports = {
 entry: {
     bundle: [
         'babel-polyfill',
         'webpack-dev-server/client?http://localhost:9000',
         'webpack/hot/only-dev-server',
         './src/index.js'
     ]
  },
 output: {
     path: join(__dirname, 'lib'),
     filename: 'index.js'
  },
 module: {
     rules: [
          {
             use: 'babel-loader',
             test: /\.js$/,
             exclude: /node_modules/
          }
        ]
      },
 devServer: {
     contentBase: join(__dirname, './lib'),
     port: 9000,
     hot: true
     },
 plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NamedModulesPlugin(),
  ]
};

If anyone has done an open source react-component and has some insight on how to approach not just this; but the project in general I would be very grateful!

7