# pizza-package

> 1. We're going to initialise the repository - `yarn init -y` 2. Next we're gonna add TypeScript and node types - `yarn add -D typescript @types/node` 3. I've taken the liberty of adding some files already - tsconfig with some basic defaults, and a `src` f

Latest version **2.0.0** (published 2022-11-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install pizza-package
pnpm add pizza-package
yarn add pizza-package
bun add pizza-package
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2022-11-17 |
| First published | 2022-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 7.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jamiehaywood |

## Links

- npm: https://www.npmjs.com/package/pizza-package
- npm.io page: https://npm.io/package/pizza-package

## Recent versions

- 2.0.0 (latest) — 2022-11-17
- 0.0.1 — 2022-11-17

## README

1. We're going to initialise the repository - `yarn init -y`
2. Next we're gonna add TypeScript and node types - `yarn add -D typescript @types/node`
3. I've taken the liberty of adding some files already - tsconfig with some basic defaults, and a `src` folder with a `getPizzaRecipe` function inside `utils` and some interfaces associated with our function.
4. Now, we could just run `tsc` and then publish our lib folder, but there's a couple of things wrong with this:
   - first of all it outputs multiple files and folders - in this case we can see that there's a JS file generated for the types file, which aren't needed. We have to remember that `tsc` isn't a bundler, just a transpiler.
   - If the consumer wanted to consume the `Pizza` type, and it wasn't exported from the `index.ts` they would have import from the dist or extract the type from the function, which looks ugly & isn't best practice. Furthermore, often IDEs get confused and import the type from the dist folder, which is not what we want.
   - We wouldn't be able to exclude types `SecretBaseIngredients.types.ts` from the consumer
   - You don't get some of the goodness of a compiler like ESBuild like tree shaking, minification and traspeed

To solve some of these issues, I'm going to use a bundler. In this case `rollup`. It's been the industry standard bundler for a while, and supports a lot of new tooling..including `esbuild`, which will be my choice of transpiler. Finally, we're also going to add `rollup-plugin-dts` which allows us to bundle the types we want to expose to the consumer.

1. So, let's add these dependencies - `yarn add -D rollup rollup-plugin-esbuild esbuild rollup-plugin-dts`
2. And then create a rollup config file `touch rollup.config.ts`

ES Modules has been generally available since Node 14's release in 2020, so there's no reason why we shouldn't be an ESM-first package, but also publish CJS version of our package for compatibility. To do this we need to make some changes to our `package.json`

1. Lets change the package type to `"type": "module"`
2. Replace the `"main"` key value pair with `"source": "src/index.ts"`
3. Add a `"types"` key with `"types": "dist/index.d.ts"`
4. Add a `"files"` key with `"files": ["dist"]`
5. Add an exports key with 
   ```json
   "exports": {
    "./package.json": "./package.json",
    ".": {
      "require": "./dist/index.js",
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    }
  },
  ```
The "exports" field allows us to restrict external access to non-exported module files.

4. Next we're going to add our rollup config. Here's something I prepared earlier:
   
```js
import esbuild from "rollup-plugin-esbuild";
import { createRequire } from "module";
import dts from "rollup-plugin-dts";

const require = createRequire(import.meta.url);
const pkgjson = require("./package.json");

/**
 * @type {import('rollup').RollupOptions[]}
 */
const config = [
  {
    plugins: [esbuild()],
    input: pkgjson.source,
    output: [
      {
        format: "es",
        file: pkgjson.exports["."].import,
      },
      {
        format: "cjs",
        file: pkgjson.exports["."].require,
      },
    ],
  },

  {
    plugins: [dts()],
    input: pkgjson.source,
    output: [
      {
        file: pkgjson.types,
        format: "es",
      },
    ],
  },
];

export default config
```

1. Finally, we're going to add a build script: `"build": "rollup -c"` and run `yarn build`
And here's the output a `dist` folder with 3 files `index.d.ts`, `index.js` and `index.mjs`, ready to ship. Much better than our `lib` folder.

---
_Source: https://npm.io/package/pizza-package · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._