Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minor grammar optimizations in main and docs READMEs #1258

Open
wants to merge 21 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
72 changes: 36 additions & 36 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 <module|pkgJson>` 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 <module|pkgJson>` flag to mark other packages or other special `package.json`'s `dependencies` and `peerDependencies` as external.

### Excluding all packages

Expand Down Expand Up @@ -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:

Expand All @@ -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`.
Expand All @@ -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({
Expand All @@ -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 <entry>` 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 <entry>` 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:

Expand All @@ -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)

Expand All @@ -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

Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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({
Expand Down Expand Up @@ -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.

Expand All @@ -344,21 +344,21 @@ 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
```

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

Expand All @@ -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
Expand All @@ -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'
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -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 = {
Expand All @@ -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

Expand Down Expand Up @@ -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`.

Expand All @@ -599,21 +599,21 @@ 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:

```bash
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

Expand Down