Skip to content

Instantly share code, notes, and snippets.

@jayphelps
Last active May 11, 2024 00:29
Show Gist options
  • Save jayphelps/51bafb4505558736fdba0aaf8bfe69d3 to your computer and use it in GitHub Desktop.
Save jayphelps/51bafb4505558736fdba0aaf8bfe69d3 to your computer and use it in GitHub Desktop.
TypeScript output es2015, esm (ES Modules), CJS, UMD, UMD + Min + Gzip. Assumes you install typescript (tsc), rollup, uglifyjs either globally or included as devDependencies
{
"scripts": {
"build": "npm run build:es2015 && npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:umd:min",
"build:es2015": "tsc --module es2015 --target es2015 --outDir dist/es2015",
"build:esm": "tsc --module es2015 --target es5 --outDir dist/esm",
"build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs",
"build:umd": "rollup dist/esm/index.js --format umd --name YourLibrary --sourceMap --output dist/umd/yourlibrary.js",
"build:umd:min": "cd dist/umd && uglifyjs --compress --mangle --source-map --screw-ie8 --comments --o yourlibrary.min.js -- yourlibrary.js && gzip yourlibrary.min.js -c > yourlibrary.min.js.gz",
}
}
@craigphicks
Copy link

craigphicks commented Feb 18, 2022

@jayphelps
I notice you are calling tsc 3 times - that's 3 times the TS type checker is being invoked, and doing exactly the same thing each time (because the different parameters you passed only apply to the output after the type-checking [.... I believe]). Type checking is what takes time for tsc.

Alternately you could pass through the type checker with tsc just once to produce ESM, and pass that ESM result through rollup to produce ESM and CJS versions (or whatever else) which would include all that great tree shaking functionality which tsc doesn't do.
Disclaimer - I'm in the middle of trying to that now and was looking around for references which is how I got here - haven't completed it yet.

@craigphicks
Copy link

@jdalton
Good point. so there is no choice but to output both CJS and ESM. (Which is what @jayphelps seems to be doing).
CJS for users who are writing CommonJS apps and don't wan't to go through the trouble of converting ESM->CSJ themselves.
ESM for just about any other use.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment