htpap v0.0.1

1. tsc A couple of things wrong with this
   • first of all it outputs multiple files (yes you can avoid this by using outFile in TSConfig, but only 'amd' and 'system' modules are supported)
   • It generates a lot of folders and files - in this case we can see that there's a JS file generated for the types file, which isn't needed.
   • If the consumer wanted to consume the Pizza type, they would have import from the dist, which looks ugly & isn't best practice.

To rectify this, I'm going to use a bundler. In this case rollup. It's been the industry standard for packages for a while, and supports a lot of new tooling..including esbuild, which is 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 our dependencies - yarn add -D rollup rollup-plugin-esbuild esbuild rollup-plugin-dts
2. And then create a rollup config file touch rollup.config.js

ES Modules has been generally available since Node 14's release in 2020, so there's no reason why we wouldn'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 an exports key with

"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:

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");

export default [
  {
    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",
      },
    ],
  },
];