diff --git a/README.md b/README.md index b80ec97f9..d89560ff0 100644 --- a/README.md +++ b/README.md @@ -42,13 +42,13 @@ This will output `dist/index.js` and `dist/cli.js`. ## 📚 Documentation -For complete usages, please dive into the [docs](https://tsup.egoist.dev). +Check out the [docs](https://tsup.egoist.dev) for a full usage guide. For all configuration options, please see [the API docs](https://jsdocs.io/package/tsup). ## 💬 Discussions -Head over to the [discussions](https://github.com/egoist/tsup/discussions) to share your ideas. +Head over to [discussions](https://github.com/egoist/tsup/discussions) to share your ideas. ## Sponsors diff --git a/docs/README.md b/docs/README.md index 46449dd86..15278eb7c 100644 --- a/docs/README.md +++ b/docs/README.md @@ -22,7 +22,7 @@ Anything that's supported by Node.js natively, namely `.js`, `.json`, `.mjs`. An ## Install -Install it locally in your project folder: +Install tsup locally in your project folder: ```bash npm i tsup -D @@ -54,7 +54,7 @@ This will output `dist/index.js` and `dist/cli.js`. ### Excluding packages -By default tsup bundles all `import`-ed modules but `dependencies` and `peerDependencies` in your `package.json` are always excluded, you can also use `--external ` flag to mark other packages or other special `package.json`'s `dependencies` and `peerDependencies` as external. +By default tsup bundles all `import`-ed modules but `dependencies` and `peerDependencies` in your `package.json` are always excluded. You can also use the `--external ` flag to mark other packages or other special `package.json`'s `dependencies` and `peerDependencies` as external. ### Excluding all packages @@ -138,7 +138,7 @@ The `options` here is derived from CLI flags. #### JSON Schema Store -Developers who are using [vscode](https://code.visualstudio.com/) or text editor which supports the JSON Language Server can leverage the [tsup schema store](https://cdn.jsdelivr.net/npm/tsup/schema.json) via CDN. This schema store will provide intellisense capabilities such as completions, validations and descriptions within JSON file configurations like the `tsup.config.json` and `package.json` (tsup) property. +Developers who are using [vscode](https://code.visualstudio.com/) or a text editor that supports the JSON Language Server can leverage the [tsup schema store](https://cdn.jsdelivr.net/npm/tsup/schema.json) via CDN. This schema store will provide intellisense capabilities such as completions, validations and descriptions within JSON file configurations like the `tsup.config.json` and `package.json` (tsup) property. Provide the following configuration in your `.vscode/settings.json` (or global) settings file: @@ -155,7 +155,7 @@ Provide the following configuration in your `.vscode/settings.json` (or global) ### Multiple entrypoints -Beside using positional arguments `tsup [...files]` to specify multiple entrypoints, you can also use the cli flag `--entry`: +Besides using positional arguments (`tsup [...files]`) to specify multiple entry points, you can also use the `--entry` CLI flag. ```bash # Outputs `dist/a.js` and `dist/b.js`. @@ -169,7 +169,7 @@ The associated output file names can be defined as follows: tsup --entry.foo src/a.ts --entry.bar src/b.ts ``` -It's equivalent to the following `tsup.config.ts`: +This is equivalent to the following `tsup.config.ts`: ```ts export default defineConfig({ @@ -191,11 +191,11 @@ tsup index.ts --dts This will emit `./dist/index.js` and `./dist/index.d.ts`. When emitting multiple [bundle formats](#bundle-formats), one declaration file per bundle format is generated. This is required for consumers to get accurate type checking with TypeScript. Note that declaration files generated by any tool other than `tsc` are not guaranteed to be error-free, so it's a good idea to test the output with `tsc` or a tool like [@arethetypeswrong/cli](https://www.npmjs.com/package/@arethetypeswrong/cli) before publishing. -If you have multiple entry files, each entry will get a corresponding `.d.ts` file. So when you only want to generate declaration file for a single entry, use `--dts ` format, e.g. `--dts src/index.ts`. +If you have multiple entry files, each entry will get a corresponding `.d.ts` file. So when you only want to generate a declaration file for a single entry, use `--dts ` format, e.g. `--dts src/index.ts`. -Note that `--dts` does not resolve external (aka in `node_modules`) types used in the `.d.ts` file, if that's somehow a requirement, try the experimental `--dts-resolve` flag instead. +Note that `--dts` does not resolve external (aka in `node_modules`) types used in the `.d.ts` file. If that's somehow a requirement, try the experimental `--dts-resolve` flag instead. -Since tsup version 8.0.0, you can also use `--experimental-dts` flag to generate declaration files. This flag use [@microsoft/api-extractor](https://www.npmjs.com/package/@microsoft/api-extractor) to generate declaration files, which is more reliable than the previous `--dts` flag. It's still experimental and we are looking for feedbacks. +Since tsup version 8.0.0, you can also use `--experimental-dts` flag to generate declaration files. This flag uses [@microsoft/api-extractor](https://www.npmjs.com/package/@microsoft/api-extractor) to generate declaration files, which is more reliable than the previous `--dts` flag. It's still experimental and we are looking for feedback. To use `--experimental-dts`, you would need to install `@microsoft/api-extractor`, as it's a peer dependency of tsup: @@ -205,9 +205,9 @@ npm i @microsoft/api-extractor -D yarn add @microsoft/api-extractor --dev ``` -#### Emit declaration file only +#### Emit declaration file(s) only -The `--dts-only` flag is the equivalent of the `emitDeclarationOnly` option in `tsc`. Using this flag will only emit the declaration file, without the JavaScript files. +The `--dts-only` flag is the equivalent of the `emitDeclarationOnly` option in `tsc`. Using this flag will only emit the declaration file(s), without the JavaScript files. #### Generate TypeScript declaration maps (.d.ts.map) @@ -217,7 +217,7 @@ They should not be included in a published NPM package and should not be confuse [Tsup is not able to generate those files](https://github.com/egoist/tsup/issues/564). Instead, you should use the TypeScript compiler directly, by running the following command after the build is done: `tsc --emitDeclarationOnly --declaration`. -You can combine this command with Tsup [`onSuccess`](https://tsup.egoist.dev/#onsuccess) callback. +You can combine this command with tsup's [`onSuccess`](https://tsup.egoist.dev/#onsuccess) callback. ### Generate sourcemap file @@ -229,7 +229,7 @@ This will emit `./dist/index.js` and `./dist/index.js.map`. If you set multiple entry files, each entry will get a corresponding `.map` file. -If you want to inline sourcemap, you can try: +If you want to inline sourcemaps, you can try: ```bash tsup index.ts --sourcemap inline @@ -243,13 +243,13 @@ tsup index.ts --sourcemap inline Supported format: `esm`, `cjs`, (default) and `iife`. -You can bundle in multiple formats in one go: +You can bundle to multiple formats in one go: ```bash tsup src/index.ts --format esm,cjs,iife ``` -That will output files in following folder structure: +That will output files in the following folder structure: ```bash dist @@ -269,13 +269,13 @@ dist Read more about [`esm` support in Node.js](https://nodejs.org/api/esm.html#esm_enabling). -If you don't want extensions like `.mjs` or `.cjs`, e.g. you want your library to be used in a bundler (or environment) that doesn't support those, you can enable `--legacy-output` flag: +If you don't want extensions like `.mjs` or `.cjs`, e.g. you want your library to be used in a bundler (or environment) that doesn't support those, you can pass the `--legacy-output` flag: ```bash tsup src/index.ts --format esm,cjs,iife --legacy-output ``` -..which outputs to: +...which results in: ```bash dist @@ -288,7 +288,7 @@ dist ### Output extension -You can also change the output extension of the files by using `outExtension` option: +You can also change the output extension of the files by using the `outExtension` option: ```ts export default defineConfig({ @@ -319,7 +319,7 @@ type Result = { js?: string } ### Code Splitting -Code splitting currently only works with the `esm` output format, and it's enabled by default. If you want code splitting for `cjs` output format as well, try using `--splitting` flag which is an experimental feature to get rid of [the limitation in esbuild](https://esbuild.github.io/api/#splitting). +Code splitting currently only works with the `esm` output format, and it's enabled by default. If you want code splitting for the `cjs` output format as well, try using the `--splitting` flag which is an experimental feature to get rid of [the limitation in esbuild](https://esbuild.github.io/api/#splitting). To disable code splitting altogether, try the `--no-splitting` flag instead. @@ -344,11 +344,11 @@ The value for `target` defaults to `compilerOptions.target` in your `tsconfig.js #### ES5 support -You can use `--target es5` to compile the code down to es5, in this target your code will be transpiled by esbuild to es2020 first, and then transpiled to es5 by [SWC](https://swc.rs). +You can use `--target es5` to compile the code down to es5. In this target your code will be transpiled by esbuild to es2020 first, and then transpiled to es5 by [SWC](https://swc.rs). ### Compile-time environment variables -You can use `--env` flag to define compile-time environment variables: +You can use the `--env` flag to define compile-time environment variables: ```bash tsup src/index.ts --env.NODE_ENV production @@ -356,9 +356,9 @@ tsup src/index.ts --env.NODE_ENV production Note that `--env.VAR_NAME` only recognizes `process.env.VAR_NAME` and `import.meta.env.VAR_NAME`. If you use `process.env`, it will only take effect when it is used as a built-in global variable. Therefore, do not import `process` from `node:process`. -### Building CLI app +### Building a CLI app -When an entry file like `src/cli.ts` contains hashbang like `#!/bin/env node` tsup will automatically make the output file executable, so you don't have to run `chmod +x dist/cli.js`. +When an entry file like `src/cli.ts` contains a hashbang like `#!/bin/env node`, tsup will automatically make the output file executable, so you don't have to run `chmod +x dist/cli.js`. ### Interop with CommonJS @@ -376,7 +376,7 @@ tsup src/index.ts --watch Turn on watch mode. This means that after the initial build, tsup will continue to watch for changes in any of the resolved files. -> INFO: By default it always ignores `dist`, `node_modules` & `.git` +> INFO: By default, `--watch` always ignores `dist`, `node_modules` & `.git` ```bash tsup src/index.ts --watch --ignore-watch ignore-this-folder-too @@ -386,13 +386,13 @@ tsup src/index.ts --watch --ignore-watch ignore-this-folder-too ### onSuccess -You can specify command to be executed after a successful build, specially useful for **Watch mode** +You can specify a command to be executed after a successful build, specially useful for **Watch mode** ```bash tsup src/index.ts --watch --onSuccess "node dist/index.js" ``` -`onSuccess` can also be a `function` that returns `Promise`. For this to work, you need to use `tsup.config.ts` instead of the cli flag: +`onSuccess` can also be a `function` that returns a `Promise`. For this to work, you need to use `tsup.config.ts` instead of the cli flag: ```ts import { defineConfig } from 'tsup' @@ -425,13 +425,13 @@ export default defineConfig({ ### Minify output -You can also minify the output, resulting into lower bundle sizes by using the `--minify` flag. +You can also minify the output by using the `--minify` flag, resulting in lower bundle sizes. ```bash tsup src/index.ts --minify ``` -To use [Terser](https://github.com/terser/terser) instead of esbuild for minification, pass terser as argument value +To use [Terser](https://github.com/terser/terser) instead of esbuild for minification, pass `terser` as an argument to `--minify` ```bash tsup src/index.ts --minify terser @@ -489,7 +489,7 @@ esbuild has [tree shaking](https://esbuild.github.io/api/#tree-shaking) enabled tsup src/index.ts --treeshake ``` -This flag above will enable Rollup for tree shaking, and it's equivalent to the following `tsup.config.ts`: +This flag will enable Rollup for tree shaking. It's equivalent to the following `tsup.config.ts`: ```ts import { defineConfig } from 'tsup' @@ -519,7 +519,7 @@ npm i postcss -D yarn add postcss --dev ``` -..and populate a `postcss.config.js` in your project +...and populate a `postcss.config.js` in your project ```js module.exports = { @@ -529,9 +529,9 @@ module.exports = { ### Metafile -Passing `--metafile` flag to tell esbuild to produce some metadata about the build in JSON format. You can feed the output file to analysis tools like [bundle buddy](https://www.bundle-buddy.com/esbuild) to visualize the modules in your bundle and how much space each one takes up. +Pass the `--metafile` flag to tell esbuild to produce some metadata about the build in JSON format. You can feed the output file to analysis tools like [bundle buddy](https://www.bundle-buddy.com/esbuild) to visualize the modules in your bundle and how much space each one takes up. -The file outputs as `metafile-{format}.json`, e.g. `tsup --format cjs,esm` will generate `metafile-cjs.json` and `metafile-esm.json`. +Metafiles will be generated as `metafile-{format}.json`, e.g. `tsup --format cjs,esm` will generate `metafile-cjs.json` and `metafile-esm.json`. ### Custom esbuild plugin and options @@ -577,9 +577,9 @@ export default defineConfig({ - When building the cjs bundle, it will compile `import.meta.url` as `typeof document === "undefined" ? new URL("file:" + __filename).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href` - When building the esm bundle, it will compile `__dirname` as `path.dirname(fileURLToPath(import.meta.url))` -### Copy files to output directory +### Copy static files to the output directory -Use `--publicDir` flag to copy files inside `./public` folder to the output directory. +Use the `--publicDir` option to copy files inside `./public` folder to the output directory. You can also specify a custom directory using `--publicDir another-directory`. @@ -599,7 +599,7 @@ await build({ For all available options for the `build` function, please see [the API docs](https://jsdocs.io/package/tsup). -### Using custom tsconfig.json +### Using a custom tsconfig.json You can also use custom tsconfig.json file configurations by using the `--tsconfig` flag: @@ -607,13 +607,13 @@ You can also use custom tsconfig.json file configurations by using the `--tsconf tsup --tsconfig tsconfig.prod.json ``` -By default, tsup try to find the `tsconfig.json` file in the current directory, if it's not found, it will use the default tsup config. +By default, tsup tries to find the `tsconfig.json` file in the current directory. If it can't find one, it will use the default tsup config. ## Troubleshooting ### error: No matching export in "xxx.ts" for import "xxx" -This usually happens when you have `emitDecoratorMetadata` enabled in your tsconfig.json, in this mode we use [SWC](https://swc.rs) to transpile decorators to JavaScript so exported types will be eliminated, that's why esbuild won't be able to find corresponding exports. You can fix this by changing your import statement from `import { SomeType }` to `import { type SomeType }` or `import type { SomeType }`. +This usually happens when you have `emitDecoratorMetadata` enabled in your tsconfig.json, in this mode we use [SWC](https://swc.rs) to transpile decorators to JavaScript so exported types will be eliminated. That's why esbuild won't be able to find corresponding exports. You can fix this by changing your import statement from `import { SomeType }` to `import { type SomeType }` or `import type { SomeType }`. ## License