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

brbower

v0.3.2

Published

a browserify plugin, to enable you require bower components just like node modules

Downloads

51

Readme

brbower

NPM

Let brbower plugin require bower components for you when building bundles, then you can require them as normal node modules in application codes.
You can also provide external config, to guide brbower to external some bower components, which is useful when when building multiple bundles.

install

With npm do:

npm install brbower

usage

In your task runner like gulp, add this plugin to browserify:

b.plugin('brbower', {
	require: ['*', 'base62/lib/base62'],
	external: {
		exclude: ['comp1', 'comp2']
	}
});

p.s. of course, you can also configure this in node package.json.

Then, in js or html codes, you can require it like normal node module:

// in xxx.js
var comp1 = require('comp1');
var comp2 = require('alias2');
...

// in xx.html
<div class="container-fluid">
...
</div>
<script type="text/javascript">
  require('domready')(function() {
    var comp1 = require('comp1');
    ...
  });
</script>

p.s. feel free to use it side by other plugins/transforms, since it's a standard browerify plugin, no hack, no change to your codes.

options

brbower config

action: string, guide brbower to require/external specified bower components; available values: require | external, default require

action config: string array or map object, available config items: include | exclude | alias, examples:
a) ['name1', 'name2', ...] (p.s. will be treated as { include: [name1, name2, ...] })
b) { exclude: ['comp5', 'comp7'], alias: ['comp1:alias1'] }

Notes: name format: name[:alias], and name can be component name or submodule like 'base62/lib/base62'.

Additional Rules:

  • if options undefined, { require: [all bower dependency names] } will be used
  • if options..include undefined, [all bower dependency names] will be used
  • if both include/exclude and alias declared an alias for a component, declaration in alias will be used

run test

You need ensure related node modules (for brbower) and bower components (for test codes) installed, then run npm test.

For first time, you can do it like this:

tminglei@T500 ~/repos/brbower $ npm install
...
tminglei@T500 ~/repos/brbower $ cd test
tminglei@T500 ~/repos/brbower/test $ bower install
...
tminglei@T500 ~/repos/brbower/test $ cd ..
tminglei@T500 ~/repos/brbower $ npm test

	> [email protected] test ~/repos/brbower
	> mocha


	  ....

	  4 passing (580ms)

tminglei@T500 ~/repos/brbower $

diffenence with debowerify

brbower and debowerify try to resolve same problem, but by different ways.
(p.s. in fact, brbower's test codes were copied and modified from debowerify, thanks so much ^^)

debowerify's way: analyze every js files of the application, to find/replace require string for bower components with their real paths
brbower's way: pre resolve specified bower components and require them to browserify, then when required, they're already there

Comparison of brbower and debowerify:

| | brbower | debowerify | | --------------------------- | ----------------------------- | ---------------------------------------------- | | require submodules (in application codes) | support (built-in) | support (built-in) | | require ... in html/template files | OK | not OK (since it doesn't anaylze html/template files) | | individual require/external (in build scripts) | easy (with options) | not so easy (through bower-resolve) | | extension type | plugin | transform | | work mode | synchronous | asynchronous (since it depends on bower's resolving results) | | performance | slight and quickly (~ 2s to build a project of mine) | slowly (13 ~ 14s to build the same project) (since it analyzes every js files of the application) |

history

v0.3.0 (14-Aug-2014):

  1. built-in support for submodules
  2. enhancement: if bower.main undefined, check 'index.js' then 'compname'.js

v0.2.0 (25-July-2014):

  1. added tests
  2. document improvement
  3. logic change: include all components declared in dependencies and devDependencies of bower.json, not only dependencies, if options..include undefined
  4. enhancement: allow to specify workdir, where to determine bower components' home dir; default process.cwd()

v0.1.0 (22-July-2014):

  1. first release (works fine in my personal project)

license

MIT