I'm trying to build an npm package to standardize my layout components that use geist components at their core. At first, I tried to use the npm package as if it was a local component but it throws a webpack loader error when it tries to read the component for example:
Module parse failed: Unexpected token (6:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const Badged = ({ content }) => {
| return (
> <Badge>
| <b>{content}</b>
| </Badge>
After reading around a bit it seems I need something like webpack or rollup to build everything to a dist folder in my npm package. How can I set up a pipeline to consume the type data from the source package and build my components to a dist folder?
As a rule of thumb, Webpack is used as an application bundler while Rollup is used as a library bundler. The reason for this is that, historically, Rollup could produce tree-shakable ESM Module output. Webpack recently added support for ESM output.
The general steps for library development are:
dist is added to files or at least not added to npmignore list.main or entry field should point to the compiled code's entry file.externals to exclude all third-party node_modules from your bundle so that they are explicitly installed on users side and your library contains only your code. Nearly all bundlers support this feature.