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

package-preview

v4.0.0

Published

Creates a production preview of a package

Downloads

1,218

Readme

package-preview

Creates a production preview of a package

npm version Status Windows build status

How many times have you published version 1.0.0 of your new fancy package and it didn't work when you installed it as a dependency? This is because what you test locally is not what gets published to the npm registry. With package-preview you'll always test exactly the same version of the package that is going to be installed as a dependency.

Background

There are many ways a package can work locally but break after it's been published.

  • a file needed by the package is not added to the files field of package.json.
  • prod dependencies are accidentally installed as dev dependencies
  • packages are required in code but not declared in package.json
  • installation lifecycle scripts fail
  • bins are incorrectly declared
  • the main file is not specified correctly

These issues are mostly missed during development and testing because the content of the local package differs from the one that is packed and published. package-preview packs your project and installs it the way it's going to be installed as a dependency, so you can test the exact same package content that is going to be installed by Node.js package managers.

However, some issues can be missed even when a package is published. From version 3, npm creates a flat node_modules structure, as a result, your project has access to packages that are not declared in its package.json. Luckily, there is an alternative package manager which is more strict - pnpm. pnpm creates a strict, nested node_modules structure and package-preview uses it for installing dependencies for the preview. You can read more about pnpm's strictness and how it helps to avoid silly bugs in this article.

Install

Install package-preview:

npm add -D package-preview
# or
pnpm add -D package-preview

package-preview uses pnpm for installing dependencies for the preview. If you don't have it installed, package-preview will use the pnpm which comes bundled with it. Though you can also install your own pnpm version globally.

Usage

Lets' say your package is called awesome. In its package.json, run preview before running your tests:

{
  "name": "awesome",
  "version": "1.0.0",
  "scripts": {
    "test": "preview && tape test.js"
  }
}

package-preview is going to create the preview version of your package and link it into your project's node_modules. So in your tests, you can require awesome and test the production version of your package:

// Instead of require('.')
const awesome = require('awesome')

assert(awesome() === 'Awesome stuff!')

Pro tips

Frequently packages run their tests before publish:

{
  "scripts": {
    "prepublishOnly": "npm test"
  }
}

However, if package-preview is executed before tests, it will result in an infinite loop:

publish -> prepublishOnly -> npm test -> package-preview -> publish

To avoid this loop, use package-preview with the --skip-prepublishOnly flag:

{
  "scripts": {
    "test": "preview --skip-prepublishOnly && tape test.js",
    "prepublishOnly": "npm test"
  }
}

There are similar flags for skipping other lifecycle events: --skip-prepublish, --skip-prepare, --skip-prepack.

CLI

  Usage: preview [what] [where] {OPTIONS}

  Options:
        --skip-prepublish  Skips running `prepublish` script before publishing preview
           --skip-prepare  Skips running `prepare` script before publishing preview
    --skip-prepublishOnly  Skips running `prepublishOnly` script before publishing preview
           --skip-prepack  Skips running `prepack` script before publishing preview

License

MIT © Zoltan Kochan