npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

lbundle

v1.3.1

Published

Small zero-configuration bundler build on top of Rollup.js and SWC for NPM libraries

Downloads

314

Readme

lbundle

Small zero-configuration bundler build on top of Rollup.js and SWC for NPM libraries

🚀 Motivation

There is always this repeated pattern for creating a library while following best practices that you need to maintain across all of your libraries, but then I thought maybe creating a library for bundling libraries is a good idea.

💾 install

NPM registry

# npm
npm i -D lbundle

# yarn
yarn add -D lbundle

# pnpm
pnpm i -D lbundle

# bun
bun i -D lbundle

JSR registry

# deno
deno add -D @mrii/lbundle

# jsr
npx jsr add -D @mrii/lbundle

🔧 Usage

package.json

This bundler heavily relay on your package.json best practices.

{
  "source": "./src/index.ts", // your source code entry
  "main": "./dist/index.js", // cjs entry
  "module": "./dist/index.mjs", // esm entry

  "types": "./dist/index.d.ts", // declaration entry

  "unpkg": "./dist/index.umd.js", // umd entry
  // "unpkg": "./dist/index.amd.js", // or as amd
  // "unpkg": "./dist/index.iife.js", // or as iife

  "bin:source": "./src/cli.ts", // your source code bin entry
  "bin": "./dist/cli.js", // bin entry

  "sideEffects": false, // enable tree shaking for your library code, also useful for users bundlers

  // the bundler will check for for different extension to bundle different formats
  "exports": {
    ".": {
      "default": "./dist/index.js",
      "node": "./dist/index.js",
      "require": "./dist/index.js",
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
    "./index.css": "./dist/index.css",
    "./package.json": "./package.json"
  }
}

CLI

Just call lbundle binary

lbundle

And That's it, it will generate the bundle for you at the target directory.

✨ Features

  • 🤩 all in 1: supports bundling your library and binary into all known formats (esm, cjs, umd, amd and iife), and generate declarations files as well.
  • 🚀 fast: it uses rust to compile source code into target env.
  • 🍙 bun: can be used with bunx --bun lbundle to speed up the bundling even more.
  • 🌲 tree shaking: it will preserve your file structure (for cjs and esm formats) so bundlers can exclude unused code easily.
  • 🎮 typescript: it supports bundling typescript code out of the box (make sure have typescript installed).
  • 🎯 JSX: supports JSX transformation out of the box (make sure have react and react-dom installed).
  • 💅 styles: it support all kind of style files:
    • css, pcss, sss: out of the box.
    • scss, sass: just install sass.
    • less: just install less.
    • styl, stylus: just install stylus.
  • 🍇 CSS modules: all styles files support CSS modules by just appending .module. before the file extension.
  • 🗺️ path alias: supports TS path and baseUrl transformation.
  • 📤 auto externals: look for your dependencies and peerDependencies and exclude them from the bundle.
  • 🪛 json: supports importing json files in your code.
  • 📦 polyfills: supports adding polyfills to the bundle if you're using latest ES features (make sure to have core-js installed)

🛣️ Roadmap

  • [x] bundling into UMD and AMD formats.
  • [x] reading exports field and generate extra output according to it.
  • [ ] vue jsx transformation.
  • [ ] extending SWC and Rollup config.
  • [ ] useful logs.
  • [ ] schema validation and useful errors.
  • [ ] bundle info.
  • [ ] watch mode.
  • [ ] more options.
    • [ ] single entry instead of preserved modules.
    • [ ] JSX transformation options.
    • ...
  • [ ] tests (partially done).
  • [x] CI.
  • [x] changelog.
  • [ ] contributors.

🧰 API

// esm
import { lbundle } from 'lbundle';

// cjs
const { lbundle } = require('lbundle');

// deno
import { lbundle } from '@mrii/lbundle';

await lbundle({
  /* options */
});

🔍 Options

| key | cli | default | description | version | | ----- | ------------ | :-----: | ------------------------- | ------- | | cwd | ---cwd, -c | "." | root dir path of your lib | 1.0.0 |