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

packtracker-nextjs-webpack-plugin

v2.2.0

Published

Upload your webpack build stats to the packtracker.io service for greater visiblity into the artifacts you're delivering to your customers.

Downloads

11

Readme

packtracker.io webpack plugin

Build Status Coverage Status Codacy Badge JavaScript Style Guide

This plugin is designed to upload your webpack build stats to the packtracker.io service.

Installation

Once you have your project created on packtracker.io, and a project_token in hand, you can get your data flowing by installing and configuring this plugin.

npm install --save-dev @packtracker/webpack-plugin

Usage

Webpack Plugin

In your webpack configuration include the plugin (along with your project token).

If the plugin fails to upload your stats, it will not error out your build but it will log output signaling the failure.

const PacktrackerPlugin = require('@packtracker/webpack-plugin')

module.exports = {
  plugins: [
    new PacktrackerPlugin({
      project_token: '<your packtracker project token>',
      upload: true
    })
  ]
}

The upload option above tells the plugin whether or not to upload your build stats when running webpack. By default, this option is set to false to prevent accidental uploading from your local machine. If the upload option is left false, the plugin will do nothing.

Once you see your stats are uploading, it is common to only upload when building your assets in a CI environment or during deployment. You can also omit this option altogether, and set the PT_UPLOAD environment variable on a per run basis to control the upload of your stats.

For example

const PacktrackerPlugin = require('@packtracker/webpack-plugin')

module.exports = {
  plugins: [
    new PacktrackerPlugin({
      project_token: '<your packtracker project token>',
      upload: process.env.CI === 'true'
    })
  ]
}

CLI

In addition to the primary use case of uploading as part of your build process via our webpack plugin, we also have a command line uploader that works well with tools like create-react-app that allow you to export your stats, but don't allow full plugin configuration.

The only caveat to using the CLI is that you must use environment variables to configure your stat reporting (most importantly PT_PROJECT_TOKEN).

Example with create-react-app

In your package.json you can add a run script like the following

{
  "scripts": {
    "packtracker": "react-scripts build --stats && packtracker-upload --stats=build/bundle-stats.json"
  }
}

The only additional parameter you can pass via the CLI is the --output-path=<path to webpack output>, if it is not passed we assume it is the directory that contains your bundle stats file.

Then running npm run packtracker should upload your stats to our service

Options

All of the options, available to the plugin can be set via argument to the plugin, environment variable, or allowed to query your local git repository.

Here is a listing of the plugin options, environment variable counterparts, and a description.

| Option | Env Variable | Description |---------------- |--------------------|------------ |project_token | PT_PROJECT_TOKEN | The project token for your packtracker.io project (required) |fail_build | PT_FAIL_BUILD | Fail the build if the stat upload fails (default: false) |branch | PT_BRANCH | Branch of the commit (default: git rev-parse --abbrev-ref HEAD) |author | PT_AUTHOR | Committer's email (default: git log --format="%aE" -n 1 HEAD) |message | PT_MESSAGE | The commit message (default: git log --format="%B" -n 1 HEAD) |commit | PT_COMMIT | The commit sha (default: git rev-parse HEAD) |committed_at | PT_COMMITTED_AT | Unix timestamp (ms) of the commit (default: git log --format="%ct" -n 1 HEAD) |prior_commit | PT_PRIOR_COMMIT | The previous commit sha (default: git rev-parse HEAD^) |exclude_assets | -- | Mirrors the excludeAssets configuration in the webpack stats config (only available to webpack version 3.5.0+)

You can find more documentation about the packtracker.io service in general at https://docs.packtracker.io