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

zeropack

v0.4.2

Published

Practical, zero-config Webpack, until you need it.

Downloads

32

Readme

Zeropack

Practical, zero-config Babel + Webpack, until you need it.

  • Node (CommonJS) / ESM (ES2015 modules) builds.
  • Webpack bundles for browsers and apps.
  • Automatic copying of Flowtyped sources, if used.
  • Out of the box support for Flow, React and Stage-0 features.
  • Full source map support.

Installing

npm i -D zeropack

Usage

$ zeropack

Types of builds

The goal of this project is to provide the most practical zero-config setup and infer defaults where possible from other parts of your project, such as your package.json. As we all know, even projects that offer zero configuration up front still need to be configurable to some extent, so being flexible is also a priority, though secondary.

As already stated, everything revolves around inferring information from your existing setup as much as possible. Most of this can be done by looking at existing conventions for "main" fields in your package.json. Fields such as browser, main and module are already highly conventionalised and give meaning to your project and, thus, also to your build, giving us a lot to work with.

There's two main types of builds:

  1. Separated
  2. Bundled

Separated

Separated builds happen when your entry point is traced, and each file in your project is pushed through Babel and emitted in the output directory as they appear relative to their source directory.

Main fields that output a separated build:

  • main - Node. Babel config defaults to { ["env", "targets": { "node": nvmrc || "current" }] }
  • module - ES2015 modules. Babel config defaults to { "presets": ["env", { "modules": false }] }.

As an example, consider the following structure:

- src
  - index.js
  - some
    - file.js

If you set your main field as dist/main.js, it would output:

- dist
  - main.js
  - some
    - file.js

Notice that index.js was renamed to main.js. This is because the source (see later in "Custom configuration") has been specified as src/index.js (this is the default), but the main was dist/main.js. This means that your entry point is renamed prior to emitting, if it is different from the source.

You can even specify mains deeper than a single level. For example, dist/main/index.js would work just fine.

Bundled

Bundled builds are passed through Webpack and use babel-loader by default for all .js or .jsx files.

Main fields that output a bundled build:

  • browser - Your entire project is bundled up so that it can be consumed by a browser. Babel config defaults to { "presets": ["env"] }.

Similarities between builds

All builds share the following similarities:

  • Babel is used for transpilation.
  • BABEL_ENV is always set to the "main" field that triggered the build (i.e. module). This allows you to customise your babel configuration on a per-build basis using the env option, if necessary.
  • If you have flow-bin specified as a devDependency, each file that is emitted gets a corresponding .js.flow file for it.
  • Source maps are automatically output for every file that gets emitted.
  • No builds are currently minified as this is usually done on the consumer's end via their build tooling.

Custom configuration

The following are options that you can use as custom configuration in the package.json.

source

Specifies the entry point for all builds. This defaults to ./src/index.js.

Todo

  • [ ] Use the consumers Babel / Webpack versions.
  • [ ] Better customisation of Babel / Webpack settings.
  • [ ] Pretty stats.
  • [ ] Animated loader.