htpap
v0.0.1
Published
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
Downloads
1
Readme
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.
- first of all it outputs multiple files (yes you can avoid this by using
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.
- So, let's add our dependencies -
yarn add -D rollup rollup-plugin-esbuild esbuild rollup-plugin-dts
- 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
- Lets change the package type to
"type": "module"
- Replace the
"main"
key value pair with"source": "src/index.ts"
- 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:
```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");
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",
},
],
},
];