$ git clone https://github.com/joefraley/npm-link-webpack-demo.git
$ cd component-library && npm i
$ cd ../client && npm i && npm link ../component-library #the magic
$ cd client && npm start
$ open http://localhost:8080 # the consumer
$ cd component-library && npm start
$ open http://localhost:8081 # the playground, who is of course also a consumer
- Open
component-library/src/components/message/index.js
. - Change text.
- See text change in both repos.
- Same for styles.
// ./component-library/webpack.config.js
// I build the component library for consumption
{
entry: './src/components/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'components.js',
libraryTarget: 'commonjs-module'
},
// ./component-library/webpack.dev.js
// I build the development sandbox at the same time.
{
entry: './src/playground/index.js',
output: {
filename: 'bundle.js',
},
// ./client/src/index.js
import React from 'react';
import {render} from 'react-dom';
import {Heading, Message} from 'component-library'; // during dev this is consumed from the npm link
render(
<div>
<Heading>Hey</Heading>
<Message />
</div>,
document.body
);
She's smart. She picks a different port for everyone automatically. No need to manage it by hand.