🎁

preconstruct

GitHub

Adding a second entrypoint

When adding a second entrypoint, you are creating a second place where a package can be accessed from. Note that much of the time you do not need a second entrypoint. We have a guide on when to use multiple entrypoints.

So, let's assume we have a package called emoji-uid that gets us three random emojis, but we want to make a second function that only uses the best emojis. What we want to be able to do is write is:

import getEmojiId from "emoji-uid";
import getAwesomeId from "emoji-uid/awesome";

With preconstruct's base setup, this isn't possible, so we will need to add a new awesome entrypoint.

First, our project structure looks like:

- src
/index.js
- package.json

and our package.json looks like:

{
"name": "emoji-uid",
"version": "1.0.2",
"description": "Get 🔥 UIDs to help make things 💯",
"main": "dist/emoji-uid.cjs.js",
"preconstruct": {
"source": "src/index.js"
}
}

Let's assume we've written our new function and written it to src/awesomenewFunction.js

The first bit of config we need to do is to add an entrypoints field to our preconstruct config. We should modify this in our package.json to read:

"preconstruct": {
"source": "src/index.js"
"entrypoints": [".", "awesome"]
},

This tells preconstruct to look for these two entrypoints. We have written out two, as the first is preconstruct's default entrypoint which we still want to include.

Next, we will want to do to add the location the entrypoint resolves to. We are going to add a new directory with its own package.json that represents this. We can run:

mkdir awesome
touch awesome/package.json

After all this, our project should look like:

- src
/index.js
/awesomeNewFunction.js
- package.json
- awesome
/package.json

The next thing we need to do is tell the new awesome entrypoint where to find the source file that it should be bundling from. If we open it up, we want to make it look like:

{
"main": "dist/emoji-uid.cjs.js",
"preconstruct": {
"source": "../src/awesomeNewFunction"
}
}

This tells this entrypoint where to find the source code it should bundle to here.

Finally, run

yarn preconstruct dev

to get set up for development. Preconstruct's CLI will alert you to any problems you are still encountering and provide guides on how to resolve them.

Got stuck?

For further documentation, we recommend reading:

I don't have a preconstruct field in my package.json

That's fine! If you haven't needed to add this field yet, you can add it with just add the precontsruct field so your package.json looks like:

{
"name": "emoji-uid",
"version": "1.0.2",
"description": "Get 🔥 UIDs to help make things 💯",
"main": "dist/emoji-uid/.cjs.js",
"preconstruct": {
"entrypoints": [".", "awesome"]
},
"files": ["dist"]
}