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

parcel-namer-rewrite

v2.10.3-rc.2

Published

This plugin allows to rewrite bundle file names.

Downloads

19,982

Readme

This plugin allows to rewrite bundle file names.

Why?

To get more control over bundle file names. You may find another useful plugin - https://github.com/ol-loginov/parcel-reporter-entries to get report about actual bundle file names.

Install and usage

Install the package first:

npm install --save-dev parcel-namer-rewrite

And edit .parcelrc file to add new namer (put it before or instead default one):

/* .parcelrc */
{
  "extends": "@parcel/config-default",
  "namers": [ "parcel-namer-rewrite" ]
}

Configuration

Plugin takes all config from package.json file. Example of config is below:

/* package.json */
{
  "name": "...",
  "version": "...",
  "description": "",
  "parcel-namer-rewrite": {
    /* This is optional, you may omit that line, and default namer will be used to get actual names */
    "chain": "@parcel/namer-default",
    /* You may select between always|never hashing. See below for details*/
    "hashing": "always",
    /* Turn plugin on and off */
    "disable": false,
    /* Rewrite rules */
    "rules": {
      "styles/(.*).css": "$1.{hash}.css",
      "scripts/TestMePlease.js": "Dunno.js"
    },
    /* profiles are optional */
    "profiles": {
      "development": {
        /* for development Node mode */
      },
      "production": {
        /* for production Node mode */
      },
      "other-custom-profile": {
        /* this profile is activated via environment variable */
      }
    }
  }
}

This example:

  1. Rewrites all .css bundles in "styles" folder of distDir directly to distDir and adds hashes to names.
  2. Moves "scripts/TestMePlease.js" to "Dunno.js"

How to write rules

"rules" is the object with rules: "key" is RegExp pattern to search in file names, "value" is replacement strings (you may use RegExp references here)

Using hash in file names

File name "$1.{hash}.css" adds hash before extension. If hash is empty (in development mode, for example), then you get double dot in file name:

"file.{hash}.css" -> "file..css"

But there is a solution - just put dot inside brackets. For example: "file{.hash}.css" or "file{hash.}.css". In this case for empty hash strings all inside brackets will be removed. And you may use any single character instead of dot: "file{~hash}.css", "file{-hash}.css" are valid replacements.

Hashing mode

In development mode hashes are blank for file names. You may force hashing in development mode by setting "hashing" to true in "development" profile.

Like this:

/* package.json */
{
  "parcel-namer-rewrite": {
    "rules": {
      /* some rules  */
    },
    "profiles": {
      "development": {
        "hashing": "always"
      }
    }
  }
}

You may turn off hashing completely (even for non-entry bundles) by selecting hashing to "never". You may set it on the main configuration or in profile configuration.

Any other (or absent) value for `hashing' will keep hash only for assets that are hashed by parcel itself.

Hide logs

This plugin will log every renamed file. To disable this feature, add this option to package.json :

/* package.json */
{
  "parcel-namer-rewrite": {
    // ...
    "silent": true
  }
}

Disable in development mode

You may want to disable the namer in development mode. To disable the plugin, add this option to package.json profile "development" :

/* package.json */
{
  "parcel-namer-rewrite": {
    // ...
    "profiles": {
      "development": {
        "disable": true
      }
    },
  }
}

Configuration profiles

You may want to override some configuration based on some condition - use configuration profile feature! "profiles" section in plugin configuration may contain additional configuration options that are activated based on profile key. By default, there are "development" and "production" profiles (you don't need to activate it via environment). These profiles are being activated by current Node mode - development or production.

In configuration below plugin is turned off for production mode:

/* package.json */
{
  "parcel-namer-rewrite": {
    "profiles": {
      "development": {
        /* for development Node mode */
      },
      "production": {
        /* for production Node mode */
        "disable": true
      },
    }
  }
}

To activate other profiles - use environment variable PARCEL_NAMER_REWRITE_PROFILE. Here you may see command line:

PARCEL_NAMER_REWRITE_PROFILE=myprofile parcel build

and corresponding configuration profile in package.json (it disables hashing completely)

/* package.json */
{
  "parcel-namer-rewrite": {
    "profiles": {
      "myprofile": {
        "hashing": "never"
      }
    }
  }
}

You may activate multiple profiles with comma-delimited list of profile keys

PARCEL_NAMER_REWRITE_PROFILE=myprofile,profile2,profile3 parcel build