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:
src/ lib/ and I declare a filename: 'index.js' "main" in the package.json so in my case "main": "lib/index.js" Areas I'm getting super confused on:
lib/ ?"file" doing? Seems like the files listed in the array are outputs for npm.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?localhost',
'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!
Juho Vepsäläinen
SurviveJS
I found this short tutorial on how to use webpack2 for authoring libraries:
https://webpack.js.org/guides/author-libraries/
I am curious though is externals directly related to my dependencies ?
If react is a dependency to my package I should not have it in my package right? It should be something I expect the user to have in their project. So including it as an external would make sense?
I start React projects with Facebooks create-react-app, it takes away all the webpack setup and is a great starting point for React applications
I have listed my guidelines at Authoring Packages chapter of my book. When it comes to output, there are a couple of things to keep in mind:
mainshould point to a precompiled version (ES5) of the component you can consume from vanilla Node. This means JSX is transformed to JavaScript calls and so on. This is the absolute minimum you should provide.moduleshould point to a precompiled version that retains ES6 module definitions. Doing this enables tree shaking bundlers, such as webpack, to function. Everything else apart from the module definitions should be compiled. This is an optional step.