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

parcelify2

v2.2.2

Published

Create css bundles from npm packages using the browserify dependency graph.

Downloads

8

Readme

This is a fork with event-based watch mode. The original README included below.

npm install parcelify2


Parcelify

Add css to your npm modules consumed with browserify.

  • Just add a style key to your package.json to specify the package's css file(s).
  • Efficiently transform scss / less to css, etc. using transform streams.
  • Rebuild css bundles automatically on changes in watch mode.
  • Leverage a robust API to create larger build tools like cartero.

Many thanks to James Halliday for his help and guidance in bringing this project into reality.

How dat work?

├── node_modules
│   └── my-module
│       ├── index.js
│       ├── myModule.css
│       └── package.json
└── main.js

In my-module's package.json, the module's style assets just need to be enumerated (in glob notation):

{
  "name" : "my-module",
  "version": "1.5.0",
  "style" : "*.css"      // glob notation. can optionally be an array
}

In main.js, everything looks the same:

myModule = require( 'my-module' );

console.log( 'hello world' );

Now just run parcelify as a browserify plugin using browserify's -p flag:

$ browserify main.js -o bundle.js -p [ parcelify -o bundle.css ]

Parcelify will concatenate all the css files in the modules on which main.js depends -- in this case just myModule.css -- in the order of the js dependency graph, and write the output to bundle.css.

Use the -w flag to keep the bundle up to date when changes are made in dev mode:

$ watchify main.js -o bundle.js -p [ parcelify -wo bundle.css ]

Installation

In your project directory,

$ npm install parcelify

Plugin options

--cssBundle, -o     Path of the destination css bundle.

--watch, -w         Watch mode - automatically rebuild css bundle as appropriate for changes.

--transform, -t     Name or path of an application transform. (See discussion of application transforms.)

--transformDir, -d  Path of an application transform directory. (See discussion of application transforms.)

--loglevel -l       Set the verbosity of npmlog, eg. "silent", "error", "warn", "info", "verbose"

Transforms

Local (package specific) transforms

The safest and most portable way to apply transforms like sass -> css is using the transforms key in a package's package.json. The key should be an array of names or file paths of transform modules. For example,

{
  "name": "my-module",
  "description": "Example module.",
  "version": "1.5.0",
  "style" : "*.scss",
  "transforms" : [ "sass-css-stream" ],
  "dependencies" : {
    "sass-css-stream": "^0.0.1"
  }
}

All transform modules are called on all assets. It is up to the transform module to determine whether or not it should apply itself to a file (usually based on the file extension).

Application level transforms

You can apply transforms to all packages within an entire branch of the directory tree using the appTransforms and appTransformDirs options or their corresponding command line arguments. (Packages inside a node_modules folder located inside one of the supplied directories are not effected.) For example, to transform all sass files inside the current working directory to css,

$ browserify main.js -o bundle.js -p [ parcelify -o bundle.css -t sass-css-stream -d . ]

Catalog of transforms

The following transforms can be used with parcelify. Please let us know if you develop a transform and we'll include it in this list.

API

p = parcelify( b, [options] )

b is a browserify instance. You must call b.bundle() before parcelify will do its thing. Options are:

  • bundles - A hash that maps asset types to bundle paths. You will generally just want an entry for a style bundle, but arbitrary asset types are supported. Default:
bundles : {
  style : 'bundle.css'   // bundle `style` assets and output here
}
  • bundlesByEntryPoint (default: undefined) - If multiple entry points have been supplied to the browserify instance, this option is used to determine the output bundles for each entry point, instead of bundles. For example:
{
  '/Users/me/myWebApp/views/page1/page1.js' : { style : 'static/page1.css' },
  '/Users/me/myWebApp/views/page2/page2.js' : { style : 'static/page2.css' }
}
  • appTransforms (default: undefined) - An array of transform modules names / paths or functions to be applied to all packages in directories in the appTransformDirs array.
  • appTransformDirs (default: undefined) - appTransforms are applied to any packages that are within one of the directories in this array. (The recursive search is stopped on node_module directories.)
  • logLevel - set the npmlog logging level.
  • watch (default: false) - automatically rebuild bundles as appropriate for changes.

A parcelify object is returned, which is an event emitter.

p.on( 'done', function(){} );

Called when all bundles have been output.

p.on( 'error', function( err ){} );

Called when an error occurs.

p.on( 'packageCreated', function( package ){} );

Called when a new package is created. package is a package object as defined in lib/package.js.

p.on( 'assetUpdated', function( eventType, asset ){} );

Called when a style asset is updated in watch mode. eventType is 'added', 'changed', or 'deleted', and asset is an asset object as defined in lib/asset.js.

Client side templates and other assets

Parcelify actually supports concatenation / enumeration of arbitrary asset types. Just add a bundle for an asset type in the bundles option and use the same key to enumerate assets of that type in package.json.

A tempting use case for this feature is client side templates - just include a template key in package.json and a corresponding entry in the bundles option, and you have a bundle of client side templates. However, if you plan to share your packages we recommend against this practice as it makes your packages difficult to consume. Instead we recommend using a browserify transform like nunjucksify or node-hbsfy to precompile templates and require them explicitly from your JavaScript files.

For the case of assets like images, that do not need to be concatenated, you can specify a null path for the bundle. Parcelify will collect all assets of that type but not concatenate them. You can then process the individual assets further using the event callbacks. See cartero for an example of this more advanced use case.

Command line usage (depreciated)

You can also run parcelify directly from the command line, although this functionality is depreciated. Note browserify needs to be installed (or watchify, in the case that the -w flag is used).

$ parcelify main.js -o bundle.css

In addition to the options available when running parcelify as a browserify plugin, the follow options are also supported from the command line.

--jsBundle, -j    Path to save the JavaScript bundle (i.e. browserify's output).

--maps, -m        Enable JavaScript source maps in js bundles (for dev mode).

--help, -h        Show this message

Contributors

License

MIT