Giter Club home page Giter Club logo

browserify-bower's Introduction

browserify-bower

NPM

(former name brbower)

Let browserify-bower 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 browserify-bower to external some bower components, which is useful when when building multiple bundles.

install

With npm do:

npm install browserify-bower

usage

Programmatic API

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

b.plugin('browserify-bower', {
	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>

Command Line

Use conf file,

$ browserify entry.js -d -p [browserify-bower --conf conf.json] > bundle.js

Use a node of the conf json,

$ browserify entry.js -d -p [browserify-bower --conf conf.json --confnode aa.bbb] > bundle.js

workdir

By default, browserify-bower will try to find the working bower components dir from the dir of process.cwd(). But you can specify another one.

In programmatic API, pls use like b.plugin(browserifyBower.workdir(thedir), {..}). In command line, pls use parameter --workdir thedir.

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

options

browserify-bower config

action: string, guide browserify-bower 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 browserify-bower) and bower components (for test codes) installed, then run npm test.

For first time, you can do it like this:

browserify-bower $ npm install
...
browserify-bower $ cd test
browserify-bower/test $ bower install
...
browserify-bower/test $ cd ..
browserify-bower $ npm test

	> [email protected] test ~/repos/browserify-bower
	> mocha


	  ....

	  4 passing (580ms)

browserify-bower $

diffenence with debowerify

browserify-bower and debowerify try to resolve same problem, but by different ways.
(p.s. in fact, browserify-bower'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
browserify-bower's way: pre resolve specified bower components and require them to browserify, then when required, they're already there

Comparison of browserify-bower and debowerify:

browserify-bower 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.4.0 (20-Dec-2014):

  1. add command line support

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.