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

browserify-banner

v2.0.4

Published

Add a comment (and/or code) to the top of your Browserify bundle

Downloads

2,914

Readme

Browserify Banner

Add a comment (and/or code) to the top of your Browserify bundle

Cross-Platform Compatibility Build Status

Coverage Status Dependencies

npm License Buy us a tree

Features

  • Customize your banner text using Lodash templates and Moment.js
  • Inject any value from your package.json file into the banner
  • Include JavaScript code to be run before your bundle is loaded
  • Works with source maps (Browserify's --debug option)

Example

Here's an example banner template (can be in a file, passed via command-line, or set programmatically):

<%= _.startCase(pkg.name) %> v<%= pkg.version %> (<%= moment().format('MMMM Do YYYY') %>)
<%= pkg.description %>

<%= pkg.homepage %>

@author  <%= pkg.author.name %> (<%= pkg.author.url %>)
@license <%= pkg.license %>

And here's what the banner would look like at the top of the Browserify bundle:

/*!
 * My Library v1.23.456 (November 24th 2016)
 * Lorem ipsum dolor sit amet, consectetur adipiscing malesuada ac elit.
 *
 * http://mycompany.com/my-library
 *
 * @author  John Doe (http://linkedin.com/john-doe)
 * @license MIT
 */

Related Projects

  • globify - Run browserify and watchify with globs - even on Windows
  • sourcemapify - Sourcemap plugin for Browserify
  • simplifyify - A simplified Browserify and Watchify CLI

Installation

Install using npm:

npm install @jsdevtools/browserify-banner

Usage

Command Line

If used without any options, then it will automatically search for a file named "banner.txt".

browserify -p @jsdevtools/browserify-banner

Or you can use Browserify's sub-argument command-line syntax to specify a different file:

browserify -p [ @jsdevtools/browserify-banner --file src/license.txt ]

Or you can specify the banner template directly:

browserify -p [ @jsdevtools/browserify-banner --template "<%= pkg.name %> v<%= pkg.version %>" ]

Browserify API

Use the plugin programmatically like this:

var browserify = require('browserify');
var banner = require('@jsdevtools/browserify-banner');

browserify({debug: true})
  .plugin(banner, {
    // Custom object to use instead of the package.json file
    pkg: {
      name: 'My Library',
      version: '1.23.456',
      author: {
        name: 'John Doe'
      }
    },

    // Path to template file (defaults to "banner.txt")
    file: 'path/to/my/banner/file.txt',

    // Or just set the template directly (will be wrapped in a comment block)
    template: '<%= pkg.name %> v<%= pkg.version %>\n' +
              '<%= moment().format('MMMM Do YYYY') %>',

    // Or set the banner directly (will NOT be wrapped in a comment block)
    banner: '// This banner is NOT a template, so <%= this.doesnt.do.anything %>.\n' +
            '// But I can inject custom code at the top of the bundle...\n' +
            'window.myCustomVariable = Date.now();\n'
  })
  .bundle()
  .pipe(fs.createWriteStream('bundle.js', 'utf8'));

Options

file (string)

The path of a file to load the banner template from. The contents of this file are read and assigned to the template option. By default, Browserify Banner will search for a file named "banner.txt", starting in the directory of your bundle's entry file, and crawling up the directory tree from there.

package (string or object)

The path of the package.json file to apply to the banner template. Or you can set it to an object that will be applied as-is to the template. By default, Browserify Banner will use the first package.json file that is loaded by Browserify, which is usually the one associated with your bundle's entry file.

template (string)

A Lodash template that will be used to create your bundle's banner. By default, this property is automatically set to the contents of the file option, but if you set template option, then it overrides the file option.

This template can use <%= code.blocks %> to inject variables into the banner. The template has access to the package.json file (e.g. pkg.name, pkg.version, etc). It also has access to all Lodash methods (e.g. _.filter(), _.map(), etc.) and the Moment.js library (e.g. moment.format(), moment().startOf(), etc).

Note: The template will automatically be wrapped in a comment block, unless it already starts with a comment. If your template contains JavaScript code that you want to be executed at the top of your bundle, then make sure that you start your code with a comment.

banner (string)

If this option is set, then all other options are ignored and this banner is injected as-is at the top of your bundle. No modification is made to this text, so it's up to you to make sure that it contains valid comments and/or code.

Contributing

Contributions, enhancements, and bug-fixes are welcome! Open an issue on GitHub and submit a pull request.

Building

To build the project locally on your computer:

  1. Clone this repo git clone https://github.com/JS-DevTools/browserify-banner.git

  2. Install dependencies npm install

  3. Link the module to itself (so Browserify can find the plugin) npm link npm link @jsdevtools/browserify-banner

  4. Run the tests npm test

License

Browserify Banner is 100% free and open-source, under the MIT license. Use it however you want.

This package is Treeware. If you use it in production, then we ask that you buy the world a tree to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.

Big Thanks To

Thanks to these awesome companies for their support of Open Source developers ❤

Travis CI SauceLabs Coveralls