Skip to content

Commit d9aa1df

Browse files
committed
update vite lib entrypoints
1 parent dfe4dbe commit d9aa1df

1 file changed

Lines changed: 24 additions & 11 deletions

File tree

  • 03-bundling/07-vite-lib/01-entrypoints

03-bundling/07-vite-lib/01-entrypoints/README.md

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
# 01 Entrypoints
22

3-
In this example we are going to add support for Browser and Node.js process using multiple formats (ESM, CJS, UMD) using the `package.json` metadata.
3+
In this example we are going to create a simple mocked library as an example, and then we'll provide support for Browser (bundlers) and Node.js consumers entrypoints. This way, our lib should be properly linked from different projects using different module formats, like ESM, CJS and UMD. We will mainly configure the `package.json` metadata for that purpose. We will start from scratch, step by step.
44

5-
We will start from scratch.
5+
Summarized steps:
66

7-
Summary steps:
8-
9-
- Create a basic library in the three formats (ESM, CJS, UMD).
7+
- Create a basic library exposed in different module flavours: ESM, CJS and UMD.
108
- Add three playgrounds consuming each format.
119

1210
# Steps to build it
1311

1412
## Mocked library
1513

16-
Let's start by creating the basic library in the three formats (ESM, CJS, UMD).
14+
Let's start by creating a basic mock library in 3 different module flavours: ESM, CJS and UMD.
1715

18-
Add manually the `package.json` (another common approach is to use `npm init -y`):
16+
Add manually the `package.json` like below. Another common approach is to use `npm init -y`.
1917

2018
_./my-lib/package.json_
2119

@@ -82,7 +80,7 @@ _./my-lib/dist/index.umd.js_
8280
8381
## Playgrounds
8482

85-
Now, we can create three playgrounds consuming each format, let's start with the CJS format:
83+
Now, we will create three playgrounds consuming each format. Let's start with the CJS format:
8684

8785
### CommonJS
8886

@@ -383,14 +381,19 @@ _./playgrounds/bundler/package.json_
383381
}
384382
```
385383

386-
Let's install `vite`:
384+
Let's install our lib with:
387385

388386
```bash
389-
npm install vite --save-dev
387+
npm install
388+
```
390389

390+
and then also install `vite` bunler with:
391+
392+
```bash
393+
npm install vite --save-dev
391394
```
392395

393-
Let's add a `index.html` file:
396+
Now let's add a `index.html` file:
394397

395398
_./playgrounds/bundler/index.html_
396399

@@ -406,6 +409,16 @@ _./playgrounds/bundler/index.html_
406409
</html>
407410
```
408411

412+
And copy paste the `index.js` file from ES playground:
413+
414+
_./playgrounds/bundler/index.js_
415+
416+
```javascript
417+
import { myFn } from "my-lib";
418+
419+
myFn();
420+
```
421+
409422
Let's run it:
410423

411424
```bash

0 commit comments

Comments
 (0)