Introducing Preconstruct 🎁

Mitchell Hamilton
Nov 6, 2019 · 3 min read
Image for post
Image for post

Preconstruct is a build tool for JavaScript packages with first-class support of monorepos and strong opinions to get you back to work faster.

A year ago, I was experiencing lots of problems maintaining Emotion’s build system so I set out to make a build system to solve the consistency and reliability problems in a repo with many packages and this eventually turned into Preconstruct. It’s working really well on projects like Emotion and React Select so I’m super excited to finally share it!

What Does Preconstruct Do?

More than just bundling, environment-specific builds, and ES Module + CommonJS targets, Preconstruct also takes the pain out of setting up your package.json, and Just Works when importing your unbuilt files from within both single-package repos and monorepos. It might be a bit more opinionated than other tools so it might not work for every possible use case but we think that supporting fewer use cases in a more complete way is better than supporting every possible use case in non-ideal ways.

Preconstruct’s model

Preconstruct has a concept of a project which contains one or more packages with one or more entrypoints which lets it work on small and large projects. For some projects, you might only have a single package which only has one entrypoint. Some projects might have many packages with lots of entrypoints.

Image for post
Image for post
Examples of Preconstruct projects

Source Module Resolution

Because Preconstruct is designed with monorepos in mind, it handles the problem of “I want to test/use a package but when I import it I get the dist file so I have to rebuild it everytime“. With the preconstruct dev. command, Preconstruct will create files that redirect back to your source code so you can import those. When running in Node, Preconstruct will even use a require hook to compile your code with Babel automatically.

Multiple Entrypoints

Packages can have multiple entrypoints(e.g. react-dom and react-dom/server). Entrypoints are first-class citizens in Preconstruct so they have all the same multiple module formats as a package with a single entrypoint has.

Strict Validation and Auto Fixing

Preconstruct will validate as much as it can to make sure your package works. This includes making sure the values of your main and module fields are correct and fixing them if they’re not which is especially helpful when managing a large number of packages. It’ll also make sure that your dist files will be included when your package is published so you’ll never publish a package but forget to add the dist files to your package’s files field again.

Getting Started

Assuming you already have a source file at src/index.js (or src/index.ts) or you’re using Yarn Workspaces and have packages with src/index.js (or src/index.ts), you can setup Preconstruct like this.

yarn add --dev @preconstruct/cli
yarn preconstruct init

If you’re in a monorepo, you should also run yarn preconstruct dev and add it to a postinstall script("postinstall": "preconstruct dev") that runs preconstruct dev so that you can import your code without having to rebuild your project every time in changes.

Publishing packages

Before you publish packages to npm, run yarn preconstruct build. Preconstruct will use your Babel config and build flat bundles so make sure to configure Babel with the transforms you want.

We strongly recommend making a single script in your package.json that runs both build and publish, to stop broken publishes, such as "release": "preconstruct build && yarn publish:packages". If you’re in a single-package repo, you could instead run preconstruct build in a prepare or prepublishOnly script.

Try going through the docs to learn more:

Preconstruct is built with a ton of amazing tools like Rollup and so many others!! Preconstruct also wouldn’t have been possible without the support of Thinkmill. 💝🎁

Thinkmill

A collection of posts by the team at Thinkmill

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store