{"id":17776,"library":"lbundle","title":"lbundle: Zero-Configuration Library Bundler","description":"lbundle is a small, zero-configuration bundler specifically designed for NPM libraries, leveraging Rollup.js for bundling and SWC (written in Rust) for fast transpilation. Its core philosophy is to minimize setup by heavily relying on best practices defined within the `package.json` file, using fields like `source`, `main`, `module`, `types`, `unpkg`, and `exports` to determine build inputs and outputs. The current stable version is 1.6.0, with frequent minor releases focusing on bug fixes and feature enhancements, as evidenced by its recent changelog. It differentiates itself by its 'convention over configuration' approach, automatic asset optimization, and robust TypeScript support, making it an ideal choice for library authors seeking a streamlined build process without extensive build toolchain configuration.","status":"active","version":"1.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/AbdUlHamedMaree/lbundle","tags":["javascript","lbundle","bundle","bundler","compile","compiler","rollup","rollupjs","swc","typescript"],"install":[{"cmd":"npm install lbundle","lang":"bash","label":"npm"},{"cmd":"yarn add lbundle","lang":"bash","label":"yarn"},{"cmd":"pnpm add lbundle","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Less style processing. Required if Less files are imported.","package":"less","optional":true},{"reason":"Peer dependency for Sass style processing. Required if Sass/SCSS files are imported.","package":"sass","optional":true},{"reason":"Peer dependency for Stylus style processing. Required if Stylus files are imported.","package":"stylus","optional":true}],"imports":[{"note":"The primary interaction with lbundle is via its command-line interface. Install as a dev dependency and run via `npx` or add to your `package.json` scripts.","wrong":"import lbundle from 'lbundle'; // This is a CLI tool, not a directly importable function for general use.","symbol":"lbundle CLI","correct":"npx lbundle"},{"note":"To enable TypeScript support for asset imports (e.g., `.png`, `.svg` as URLs or React components), add this triple-slash directive to your main TypeScript declaration file (e.g., `src/global.d.ts` or `tsconfig.json` `files` array).","wrong":"import { Asset } from 'lbundle/modules';","symbol":"Asset Modules Types","correct":"/// <reference types=\"lbundle/modules\" />"},{"note":"While primarily a CLI tool, `lbundle` exposes a programmatic API for more advanced use cases, allowing direct invocation of its build process within Node.js environments. Use ESM imports for this.","wrong":"const build = require('lbundle').build;","symbol":"build","correct":"import { build } from 'lbundle';\nawait build({ /* config */ });"}],"quickstart":{"code":"{\n  \"name\": \"my-library\",\n  \"version\": \"1.0.0\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./dist/index.js\",\n  \"module\": \"./dist/index.mjs\",\n  \"types\": \"./dist/index.d.ts\",\n  \"unpkg\": \"./dist/index.umd.js\",\n  \"sideEffects\": false,\n  \"exports\": {\n    \".\": {\n      \"default\": \"./dist/index.js\",\n      \"node\": \"./dist/index.js\",\n      \"require\": \"./dist/index.js\",\n      \"import\": \"./dist/index.mjs\",\n      \"types\": \"./dist/index.d.ts\"\n    },\n    \"./index.css\": \"./dist/index.css\",\n    \"./package.json\": \"./package.json\"\n  },\n  \"scripts\": {\n    \"build\": \"lbundle\",\n    \"dev\": \"lbundle --watch\"\n  },\n  \"devDependencies\": {\n    \"lbundle\": \"^1.6.0\"\n  }\n}\n\n// src/index.ts\nimport logo from './assets/logo.png';\nimport { ReactComponent as Icon } from './assets/icon.svg';\n\nexport const sayHello = (name: string) => {\n  console.log(`Hello, ${name}!`);\n  // Example usage of imported assets\n  document.body.innerHTML += `<img src=\"${logo}\" alt=\"Logo\" />`;\n  const iconContainer = document.createElement('div');\n  // In a React context, you'd render <Icon /> directly.\n  // For this example, we'll simulate its presence.\n  iconContainer.innerHTML = 'SVG Icon placeholder'; \n  document.body.appendChild(iconContainer);\n  return `Hello, ${name} with logo and icon!`;\n};\n\n// global.d.ts (for TypeScript asset support)\n/// <reference types=\"lbundle/modules\" />\n\n// Run the build\n// npm install && npm run build\n","lang":"typescript","description":"This quickstart demonstrates how to set up `lbundle` using a `package.json` configuration, define an entry point in TypeScript, import various asset types, and prepare your project for bundling with the `lbundle` CLI."},"warnings":[{"fix":"Ensure all relevant `package.json` fields are correctly defined according to your desired library output. Consult the `lbundle` documentation for common `package.json` best practices for libraries.","message":"lbundle heavily relies on `package.json` fields (`source`, `main`, `module`, `types`, `unpkg`, `exports`). Misconfiguring these fields, or omitting them entirely, will prevent `lbundle` from generating the expected output formats or entry points.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add `/// <reference types=\"lbundle/modules\" />` to your `global.d.ts` or a similar type declaration file, or include `lbundle/modules` in the `types` array of your `tsconfig.json`.","message":"Asset imports (images, SVGs, etc.) require a TypeScript reference directive (`/// <reference types=\"lbundle/modules\" />`) in your project's type declaration files to ensure type safety and correct resolution during development.","severity":"gotcha","affected_versions":">=1.6.0"},{"fix":"Install the required peer dependency (e.g., `npm install -D sass` for SCSS files) if you are importing files of that type in your project.","message":"Styling preprocessor support (Less, Sass, Stylus) depends on corresponding peer dependencies. If you import such files without installing the relevant package, `lbundle` will fail to process them.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Carefully define the `exports` field to map different entry points and formats to their respective paths (e.g., `./dist/index.mjs` for `import`, `./dist/index.js` for `require`). Validate with tools like `publint`.","message":"The `exports` field in `package.json` is crucial for defining how your bundled library is consumed by different environments (ESM, CJS, Node, browser). Incorrectly configuring this field can lead to module resolution issues for consumers.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Install `sass` as a development dependency: `npm install -D sass` or `yarn add -D sass`.","cause":"Sass/SCSS file imported, but `sass` peer dependency is not installed.","error":"Error: Cannot find module 'sass' imported from 'some-file.scss'"},{"fix":"Ensure `source` field in `package.json` points to the correct entry file (e.g., `./src/index.ts`) and that TypeScript is correctly configured if using TS files.","cause":"Typically indicates a misconfiguration in `package.json`'s `source` field or missing `tsconfig.json` setup for `lbundle`.","error":"Error: Unknown file extension \"./src/index.ts\" for \"./src/index.ts\""},{"fix":"Ensure `lbundle` is installed as a `devDependency` and run it via `npx lbundle` or add `lbundle` to your `package.json` scripts (e.g., `\"build\": \"lbundle\"`).","cause":"The `lbundle` CLI tool is not in your system's PATH or `npx` cannot locate it.","error":"lbundle: command not found"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}