### Install tsup with pnpm Source: https://github.com/egoist/tsup/blob/main/README.md Install tsup as a development dependency using pnpm. ```bash pnpm add tsup -D ``` -------------------------------- ### Install tsup with Yarn Source: https://github.com/egoist/tsup/blob/main/README.md Install tsup as a development dependency using Yarn. ```bash yarn add tsup --dev ``` -------------------------------- ### Install tsup with npm Source: https://github.com/egoist/tsup/blob/main/README.md Install tsup as a development dependency using npm. ```bash npm i tsup -D ``` -------------------------------- ### Install PostCSS for CSS Support Source: https://github.com/egoist/tsup/blob/main/docs/README.md Install PostCSS as a development dependency to enable advanced CSS processing with tsup. This is required before configuring PostCSS plugins. ```bash npm i postcss -D # Or Yarn yarn add postcss --dev ``` -------------------------------- ### Install API Extractor for Experimental DTS Generation Source: https://github.com/egoist/tsup/blob/main/docs/README.md To use the experimental `--experimental-dts` flag for more reliable declaration file generation via `@microsoft/api-extractor`, install it as a development dependency. ```bash npm i @microsoft/api-extractor -D # Or Yarn yarn add @microsoft/api-extractor --dev ``` -------------------------------- ### tsup configuration with defineConfig Source: https://github.com/egoist/tsup/blob/main/docs/README.md Configure tsup build options using TypeScript and the defineConfig helper function. This example disables code splitting, enables sourcemaps, and enables cleaning the output directory. ```typescript import { defineConfig } from 'tsup' export default defineConfig({ entry: ['src/index.ts'], splitting: false, sourcemap: true, clean: true, }) ``` -------------------------------- ### tsup configuration in package.json Source: https://github.com/egoist/tsup/blob/main/docs/README.md Configure tsup build options directly within the 'tsup' property of your package.json file. This example specifies entry points, disables code splitting, enables sourcemaps, and enables cleaning the output directory. ```json { "tsup": { "entry": ["src/index.ts"], "splitting": false, "sourcemap": true, "clean": true }, "scripts": { "build": "tsup" } } ``` -------------------------------- ### Minify Output with Terser Source: https://github.com/egoist/tsup/blob/main/docs/README.md Use the --minify flag to minify output for smaller bundle sizes. Specify 'terser' to use Terser for minification, ensuring terser is installed. ```bash tsup src/index.ts --minify ``` ```bash tsup src/index.ts --minify terser ``` -------------------------------- ### Customize Output File Extensions Source: https://github.com/egoist/tsup/blob/main/docs/README.md Define custom output file extensions based on the build format using the `outExtension` function in `tsup.config.ts`. This example appends the format to the JS file extension. ```typescript export default defineConfig({ outExtension({ format }) { return { js: `.${format}.js`, } }, }) ``` -------------------------------- ### onSuccess Hook with Cleanup Function Source: https://github.com/egoist/tsup/blob/main/docs/README.md The onSuccess hook in tsup.config.ts can return a cleanup function to stop processes started during the build, such as a server. ```typescript import { defineConfig } from 'tsup' export default defineConfig({ onSuccess() { const server = http.createServer((req, res) => { res.end('Hello World!') }) server.listen(3000) return () => { server.close() } }, }) ``` -------------------------------- ### onSuccess Hook with Async Function Source: https://github.com/egoist/tsup/blob/main/docs/README.md The onSuccess hook in tsup.config.ts can be an async function returning a Promise, suitable for starting long-running tasks like a server. ```typescript import { defineConfig } from 'tsup' export default defineConfig({ async onSuccess() { // Start some long running task // Like a server }, }) ``` -------------------------------- ### Display tsup Help Information Source: https://github.com/egoist/tsup/blob/main/docs/README.md Run `tsup --help` in your terminal to view all available command-line options and their descriptions. This is useful for understanding the full range of tsup's capabilities. ```bash tsup --help ``` -------------------------------- ### Define Multiple Entry Points with tsup CLI Source: https://github.com/egoist/tsup/blob/main/docs/README.md Use the `--entry` flag with dot notation to specify multiple named entry points for your build. This allows for distinct output files like `dist/foo.js` and `dist/bar.js`. ```bash tsup --entry.foo src/a.ts --entry.bar src/b.ts ``` -------------------------------- ### Use Legacy Output Structure for Bundle Formats Source: https://github.com/egoist/tsup/blob/main/docs/README.md Employ the `--legacy-output` flag to organize output files into subdirectories (`esm`, `iife`) rather than using format-specific extensions, which can be useful for environments that don't support extensions like `.mjs` or `.cjs`. ```bash tsup src/index.ts --format esm,cjs,iife --legacy-output ``` -------------------------------- ### Generate Build Metadata with --metafile Source: https://github.com/egoist/tsup/blob/main/docs/README.md Use the --metafile flag to generate a JSON file containing build metadata. This metadata can be used with analysis tools to visualize module dependencies and sizes. ```bash tsup --format cjs,esm ``` -------------------------------- ### Run Tests with pnpm Source: https://github.com/egoist/tsup/blob/main/CONTRIBUTING.md Execute the project's test suite using the pnpm package manager. Ensure all tests pass before submitting changes. ```bash pnpm test ``` -------------------------------- ### Enable Watch Mode Source: https://github.com/egoist/tsup/blob/main/docs/README.md Turn on watch mode to continuously monitor files for changes after the initial build. By default, it ignores dist, node_modules, and .git folders. ```bash tsup src/index.ts --watch ``` -------------------------------- ### Configure Multiple Entry Points in tsup.config.ts Source: https://github.com/egoist/tsup/blob/main/docs/README.md Programmatically define multiple entry points using an object in `tsup.config.ts`. This configuration outputs `dist/a.js` and `dist/b.js`. ```typescript export default defineConfig({ // Outputs `dist/a.js` and `dist/b.js`. entry: ['src/a.ts', 'src/b.ts'], // Outputs `dist/foo.js` and `dist/bar.js` entry: { foo: 'src/a.ts', bar: 'src/b.ts', }, }) ``` -------------------------------- ### Initialize Docup with Custom Navigation and Sidebar Content Source: https://github.com/egoist/tsup/blob/main/docs/index.html This JavaScript snippet initializes the docup library with custom navigation links and HTML content to be displayed before the sidebar. It's useful for adding external links or sponsor information to your documentation. ```javascript import * as docup from 'https://cdn.jsdelivr.net/npm/@egoist/docup@2/dist/docup.min.js' docup.init({ // ..options navLinks: [ { text: `Type Doc`, link: `https://jsdocs.io/package/tsup` }, { text: `GitHub`, link: `https://github.com/egoist/tsup` }, { text: `❤️️ Sponsor`, link: `https://github.com/sponsors/egoist` }, ], beforeSidebar: `
SPONSOR
`, }) ``` -------------------------------- ### Specify multiple entry points with --entry flag Source: https://github.com/egoist/tsup/blob/main/docs/README.md Use the --entry flag in the tsup CLI to specify multiple input files, which will result in corresponding output files in the dist directory. ```bash tsup --entry src/a.ts --entry src/b.ts ``` -------------------------------- ### Bundle in Multiple Formats Source: https://github.com/egoist/tsup/blob/main/docs/README.md Configure tsup to output multiple bundle formats (e.g., `esm`, `cjs`, `iife`) in a single build by comma-separating them with the `--format` flag. The output structure varies based on the `type` field in `package.json`. ```bash tsup src/index.ts --format esm,cjs,iife ``` -------------------------------- ### Copy Files to Output Directory with --publicDir Source: https://github.com/egoist/tsup/blob/main/docs/README.md Use the --publicDir flag to copy the contents of a specified directory (e.g., './public') into the output directory during the build process. This is useful for including static assets. ```bash tsup --publicDir another-directory ``` -------------------------------- ### Execute Command on Successful Build Source: https://github.com/egoist/tsup/blob/main/docs/README.md Use the --onSuccess flag to run a command after a successful build, particularly useful in watch mode. This can also be a function returning a Promise in tsup.config.ts. ```bash tsup src/index.ts --watch --onSuccess "node dist/index.js" ``` -------------------------------- ### Generate Sourcemap Files with tsup Source: https://github.com/egoist/tsup/blob/main/docs/README.md Enable sourcemap generation using the `--sourcemap` flag. This outputs both `./dist/index.js` and `./dist/index.js.map` for debugging. ```bash tsup index.ts --sourcemap ``` -------------------------------- ### Configure PostCSS Plugins Source: https://github.com/egoist/tsup/blob/main/docs/README.md Create a postcss.config.js file to specify PostCSS plugins like Tailwind CSS and Autoprefixer. This configuration is used by tsup for CSS processing. ```javascript module.exports = { plugins: [require('tailwindcss')(), require('autoprefixer')()], } ``` -------------------------------- ### Custom esbuild Plugins and Options in tsup.config.ts Source: https://github.com/egoist/tsup/blob/main/docs/README.md Extend tsup's build process by providing custom esbuild plugins via `esbuildPlugins` and configuring esbuild options using `esbuildOptions` in tsup.config.ts. The `esbuildOptions` function allows modifying options based on the build context. ```typescript import { defineConfig } from 'tsup' export default defineConfig({ esbuildPlugins: [YourPlugin], esbuildOptions(options, context) { options.define.foo = '"bar"' }, }) ``` -------------------------------- ### Define Compile-Time Environment Variables Source: https://github.com/egoist/tsup/blob/main/docs/README.md Use the --env flag to define compile-time environment variables. This recognizes process.env.VAR_NAME and import.meta.env.VAR_NAME. ```bash tsup src/index.ts --env.NODE_ENV production ``` -------------------------------- ### Preview Docs Component Source: https://github.com/egoist/tsup/blob/main/docs/README.md A Preact component that displays a warning message if the current environment is not the production documentation site. ```javascript import { html } from 'docup' export default () => { const isPreview = location.hostname !== 'tsup.egoist.dev' if (!isPreview) return null return html`
This is a preview version of the docs.
` } ``` -------------------------------- ### Bundle single file with tsup Source: https://github.com/egoist/tsup/blob/main/README.md Bundle a single TypeScript file. The output will be placed in the ./dist directory. ```bash tsup [...files] ``` -------------------------------- ### Bundle multiple files with tsup Source: https://github.com/egoist/tsup/blob/main/README.md Bundle multiple TypeScript files simultaneously. Each file will be output to the ./dist directory. ```bash tsup src/index.ts src/cli.ts ``` -------------------------------- ### Use tsup JavaScript API for Programmatic Builds Source: https://github.com/egoist/tsup/blob/main/docs/README.md Integrate tsup into your Node.js projects using its JavaScript API. The `build` function accepts a configuration object with options like entry points, sourcemaps, and DTS generation. ```javascript import { build } from 'tsup' await build({ entry: ['src/index.ts'], sourcemap: true, dts: true, }) ``` -------------------------------- ### VS Code JSON schema configuration for tsup Source: https://github.com/egoist/tsup/blob/main/docs/README.md Configure VS Code settings to enable intellisense for tsup configuration files (tsup.config.json and package.json's tsup property) by referencing the schema from a CDN. ```json { "json.schemas": [ { "url": "https://cdn.jsdelivr.net/npm/tsup/schema.json", "fileMatch": ["package.json", "tsup.config.json"] } ] } ``` -------------------------------- ### Specify Custom tsconfig.json with --tsconfig Source: https://github.com/egoist/tsup/blob/main/docs/README.md Use the --tsconfig flag to point tsup to a specific tsconfig.json file for your build configuration. If no tsconfig file is found, tsup uses its default configuration. ```bash tsup --tsconfig tsconfig.prod.json ``` -------------------------------- ### Generate Declaration File for a Single Entry Source: https://github.com/egoist/tsup/blob/main/docs/README.md When using multiple entry files, specify a single entry file with `--dts ` to generate a declaration file only for that specific entry point. ```bash --dts src/index.ts ``` -------------------------------- ### JSON SWC Configuration Options Source: https://github.com/egoist/tsup/blob/main/docs/README.md This JSON object shows some SWC options that cannot be configured directly via tsup's `swc` property in `tsup.config.ts`. These options are typically handled by SWC's internal configuration. ```json { "parser": { "syntax": "typescript", "decorators": true }, "transform": { "legacyDecorator": true, "decoratorMetadata": true }, "keepClassNames": true, "target": "es2022" } ``` -------------------------------- ### Configure Custom Loaders via CLI Source: https://github.com/egoist/tsup/blob/main/docs/README.md Use the --loader flag to specify custom loaders for file types via the CLI. This allows mapping file extensions to specific esbuild loader types. ```bash tsup --loader ".jpg=base64" --loader ".webp=file" ``` -------------------------------- ### Enable Rollup Tree Shaking with tsup CLI Source: https://github.com/egoist/tsup/blob/main/docs/README.md Use the --treeshake flag to enable Rollup for tree shaking. This is useful when esbuild's default tree shaking is not performing optimally. ```bash tsup src/index.ts --treeshake ``` -------------------------------- ### Enable Custom .swcrc Configuration in tsup.config.ts Source: https://github.com/egoist/tsup/blob/main/docs/README.md To use a custom `.swcrc` configuration file for SWC with tsup, set the `swcrc` option to `true` in your `tsup.config.ts`. Tsup will then automatically discover and use your `.swcrc` file. ```typescript import { defineConfig } from 'tsup' export default defineConfig({ entry: ['src/index.ts'], splitting: false, sourcemap: true, clean: true, swc: { swcrc: true } }) ``` -------------------------------- ### Configure Custom Loaders in tsup.config.ts Source: https://github.com/egoist/tsup/blob/main/docs/README.md Define custom loaders in tsup.config.ts for mapping file extensions to esbuild loader types. This provides a programmatic way to configure loaders. ```typescript import { defineConfig } from 'tsup' export default defineConfig({ loader: { '.jpg': 'base64', '.webp': 'file', }, }) ``` -------------------------------- ### Generate Inline Sourcemaps Source: https://github.com/egoist/tsup/blob/main/docs/README.md For development purposes where `.map` file access might be restricted, use `--sourcemap inline` to embed sourcemap information directly within the JavaScript output. This is not recommended for production. ```bash tsup index.ts --sourcemap inline ``` -------------------------------- ### Watch Mode with Ignored Folders Source: https://github.com/egoist/tsup/blob/main/docs/README.md Specify folders to ignore during watch mode by repeating the --ignore-watch flag. This is useful for excluding specific directories from being monitored. ```bash tsup src/index.ts --watch --ignore-watch ignore-this-folder-too ``` ```bash tsup src src/index.ts --watch --ignore-watch folder1 --ignore-watch folder2 ``` -------------------------------- ### Generate Declaration Files with tsup Source: https://github.com/egoist/tsup/blob/main/docs/README.md Use the `--dts` flag to generate TypeScript declaration files (`.d.ts`) alongside your JavaScript output. This is crucial for type checking in consuming projects. ```bash tsup index.ts --dts ``` -------------------------------- ### Exclude packages with tsup-node Source: https://github.com/egoist/tsup/blob/main/docs/README.md Use the tsup-node executable to skip bundling Node.js packages, which is often useful for Node.js applications or APIs. ```bash tsup-node src/index.ts ``` -------------------------------- ### Merge Development into Main Branch Source: https://github.com/egoist/tsup/blob/main/CONTRIBUTING.md Merge the development branch into the main branch to prepare for a release. This command should be run after checking out the main branch. ```bash git checkout main && git merge dev ``` -------------------------------- ### Enable Shims for CJS and ESM Compatibility Source: https://github.com/egoist/tsup/blob/main/docs/README.md Set `shims: true` in your tsup.config.ts to automatically inject code that provides `__dirname` for CJS and `import.meta.url` for ESM. This ensures compatibility when these global variables are expected. ```typescript import { defineConfig } from 'tsup' export default defineConfig({ shims: true, }) ``` -------------------------------- ### Enable CommonJS Interoperability Source: https://github.com/egoist/tsup/blob/main/docs/README.md Use the --cjsInterop flag to change how default exports are transformed in CommonJS. If only default exports exist, it transforms to module.exports = x. ```bash tsup src/index.ts --cjsInterop ``` -------------------------------- ### Configure SWC useDefineForClassFields in tsup.config.ts Source: https://github.com/egoist/tsup/blob/main/docs/README.md When using legacy TypeScript decorators with `emitDecoratorMetadata` enabled, tsup uses SWC for transpilation. You can pass custom SWC configurations, such as `useDefineForClassFields`, directly within your `tsup.config.ts` file. ```typescript import { defineConfig } from 'tsup' export default defineConfig({ entry: ['src/index.ts'], splitting: false, sourcemap: true, clean: true, swc: { jsc: { transform: { useDefineForClassFields: true } } } }) ``` -------------------------------- ### Conditional tsup configuration Source: https://github.com/egoist/tsup/blob/main/docs/README.md Export a function from the tsup configuration file to conditionally set options based on CLI flags, such as enabling minification only when not in watch mode. ```typescript import { defineConfig } from 'tsup' export default defineConfig((options) => { return { minify: !options.watch, } }) ``` -------------------------------- ### Configure Rollup Tree Shaking in tsup.config.ts Source: https://github.com/egoist/tsup/blob/main/docs/README.md Alternatively, enable Rollup tree shaking by setting `treeshake: true` in your tsup.config.ts file. This provides the same functionality as the CLI flag. ```typescript import { defineConfig } from 'tsup' export default defineConfig({ treeshake: true, }) ``` -------------------------------- ### Emit Declaration File Only Source: https://github.com/egoist/tsup/blob/main/docs/README.md Use the `--dts-only` flag to generate only the TypeScript declaration files, omitting the JavaScript output. This mirrors the `emitDeclarationOnly` option in `tsc`. ```bash tsup --dts-only ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.