Huge news!Announcing our $20M Series A led by Andreessen Horowitz.Learn more β†’
Socket
Socket
Log inDemoInstall

vite-plugin-no-bundle

Package Overview
Dependencies
18
Maintainers
1
Versions
13
Issues
File Explorer

Advanced tools

Install Socket

Protect your apps from supply chain attacks

Install

vite-plugin-no-bundle

Use Vite for building without the bundling part.

    3.0.0latest
    GitHub
    npm

Version published
Maintainers
1
Weekly downloads
94
decreased by-69.68%

Weekly downloads

Readme

Source

No-bundle for Vite

⚑ Use Vite for building without the bundling part

🧰 Useful for monorepos
πŸ“¦ Can be consumed by native ESM tooling
πŸ‘·β€β™‚οΈ Lets consumers deep import specific files
✍ You control your own code splitting

With the rise in monorepos and native ESM support, it is becoming increasingly popular to release libraries that are meant to be bundled by the consuming application or even served directly. The support for library mode in Vite is still lacking when it comes to producing unbundled code, so this plugin fills in some of those gaps. πŸš€

Installation

npm

This plugin is designed to work with Vite in a development environment using Node.js. You can install this package using npm, Yarn, or pnpm using a command similar to this example for npm:

npm install -D vite-plugin-no-bundle

Usage

Vite

πŸ“œ In accordance with Vite plugin convention, we provide a default export function that takes in a bunch of customization options.

πŸ“š You can find the complete list of options below! πŸ‘‡

import { defineConfig } from 'vite'; import noBundlePlugin from 'vite-plugin-no-bundle'; export default defineConfig({ build: { lib: { formats: ['es'], entry: 'src/index.ts', }, }, plugins: [noBundlePlugin({ copy: '**/*.css' })], });

Here's an example project tree using ☝ the example vite.config.ts from above:

. β”œβ”€β”€ dist/ β”‚ β”œβ”€β”€ index.js β”‚ β”œβ”€β”€ card.css β”‚ β”œβ”€β”€ table.css β”‚ β”œβ”€β”€ createTable.js β”‚ └── fetchData.js β”œβ”€β”€ src/ β”‚ β”œβ”€β”€ index.ts β”‚ β”œβ”€β”€ card.css β”‚ β”œβ”€β”€ table.css β”‚ β”œβ”€β”€ createTable.js β”‚ └── fetchData.ts β”œβ”€β”€ package.json β”œβ”€β”€ package-lock.json β”œβ”€β”€ tsconfig.json └── vite.config.ts

⚠️ Keep in mind that non-ESM output (such as CommonJS) will probably prevent the consumer from resolving static assets. Vite relies on import.meta for getting a URL's to static assets, which is only valid when using ESM.

Options

interface VitePluginNoBundleOptions { copy?: string | string[]; internal?: string | string[]; root?: string; //= 'src' }
  • copy: One or more globs for matching files that should not be handled by Vite, but instead be marked as external and copied to the output directory as is. This is especially useful for static assets such as .css, which are otherwise inlined as raw strings when using Vite in library mode (vitejs/vite#4454).

  • internal: One or more globs for matching files that should not be automatically marked as external. This can be used to tell the plugin to not handle certain files and leave them up to other plugins & resolvers.

  • root: Exposes output.preserveModulesRoot, which controls which part of the full path to exclude when putting files into the dist/ folder. Make sure to change this if you're using something other than src/ for your source code.

Customizing file names

In previous versions of this plugin, it was possible to customize the generated file names via the fileNames option. This has been removed in favor of Vite's own build.lib.fileName option. By default, this plugin uses [name] as the fileName, resulting in files keeping their original name with the appropriate extension appended based on module format. This change was implemented to allow multiple module formats to be emitted using this plugin. Example configuration:

import { defineConfig } from 'vite'; import noBundlePlugin from 'vite-plugin-no-bundle'; export default defineConfig({ build: { lib: { formats: ['es', 'cjs'], // Generate multiple formats without bundling fileName: 'my-lib-[name]', // Extension automatically determined by format entry: 'src/index.ts', }, }, plugins: [noBundlePlugin({ copy: '**/*.css' })], });

Use cases

You can use this plugin to force Vite to leave your custom fine-tuned file structure alone. This is especially useful when consuming just part of a module directly via a deep import. For instance, if you have two Vite projects, one library and one app, the library could use this plugin so that the app is able to bundle everything together on its own terms. 🎁

Another good use-case is serving individual files via an HTTP server. Sometimes you just want a plain TS ➑️ JS file conversion (with some extra features). This plugin lets you do just that, no magic required. πŸ§™β€β™‚οΈ

Development

TypeScript

This is a fairly basic Vite plugin. The only compilation step is to run npm run build which uses tsup. There is no GitHub Action at present to auto-publish to npm, so you'll have to bug @ManBearTM to do it manually! 😁

If you're interested in learning more about Vite plugins and how they work, check out the Plugin API | Vite page!

Keywords

FAQs

Last updated on 22 Aug 2023

Did you know?

Socket installs a GitHub app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install
SocketSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚑️ by Socket Inc