{"id":20013413,"url":"https://github.com/tminglei/browserify-bower","last_synced_at":"2025-10-17T21:52:50.681Z","repository":{"id":18865979,"uuid":"22082832","full_name":"tminglei/browserify-bower","owner":"tminglei","description":"A browserify plugin, to enable you use bower components just like node modules","archived":false,"fork":false,"pushed_at":"2016-11-18T23:22:14.000Z","size":60,"stargazers_count":20,"open_issues_count":2,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-22T12:36:59.358Z","etag":null,"topics":["bower","browserify","browserify-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tminglei.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-07-21T22:39:29.000Z","updated_at":"2021-07-04T06:03:33.000Z","dependencies_parsed_at":"2022-07-25T06:46:59.771Z","dependency_job_id":null,"html_url":"https://github.com/tminglei/browserify-bower","commit_stats":null,"previous_names":["tminglei/brbower"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tminglei%2Fbrowserify-bower","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tminglei%2Fbrowserify-bower/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tminglei%2Fbrowserify-bower/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tminglei%2Fbrowserify-bower/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tminglei","download_url":"https://codeload.github.com/tminglei/browserify-bower/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250432084,"owners_count":21429609,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bower","browserify","browserify-plugin"],"created_at":"2024-11-13T07:36:29.339Z","updated_at":"2025-10-17T21:52:50.610Z","avatar_url":"https://github.com/tminglei.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"browserify-bower\n================\n\n[![NPM](https://nodei.co/npm/browserify-bower.png)](https://nodei.co/npm/browserify-bower/)\n\n_(former name `brbower`)_\n\nLet `browserify-bower` plugin require bower components for you when building bundles, then you can `require` them as normal node modules in application codes.  \nYou can also provide external config, to guide `browserify-bower` to external some bower components, which is useful when when building multiple bundles.\n\n\n# install\n\nWith [npm](https://npmjs.org) do:\n\n```\nnpm install browserify-bower\n```\n\n# usage\n## Programmatic API\nIn your task runner like `gulp`, add this plugin to `browserify`:\n```javascript\nb.plugin('browserify-bower', {\n\trequire: ['*', 'base62/lib/base62', 'base62/xxx:xxx'],\n\texternal: {\n\t\texclude: ['comp1', 'comp2']\n\t},\n\talias: ['base62/lib/base62:base62'], // or alias: { 'base62/lib/base62':'base62', ... }\n\tmainfiles: { // specify the main file for packages without a bower.json\n\t\t'base62': 'main.js'\n\t}\n});\n```\n_p.s. of course, you can also configure this in node `package.json`._\n\nThen, in js or html codes, you can require it like normal node module:\n```\n// in xxx.js\nvar comp1 = require('comp1');\nvar comp2 = require('alias2');\n...\n\n// in xx.html\n\u003cdiv class=\"container-fluid\"\u003e\n...\n\u003c/div\u003e\n\u003cscript type=\"text/javascript\"\u003e\n  require('domready')(function() {\n    var comp1 = require('comp1');\n    ...\n  });\n\u003c/script\u003e\n```\n\n###Options\n**require:** `{ include: [...], exclude: [...] }` or `[...]`, configure which ones you want `browserify-bower` to help **_require_** in `browserify` for you.   \n\u003e If only `include` part is required, you can simplify it to `require: [...]`.  \n\u003e _If if no reqiure configs are specified, all components under bower components dir will be included by default._  \n\n**external:** `{ include: [...], exclude: [...] }` or `[...]`, configure which ones you want `browserify-bower` to help **_external_** in `browserify` for you.   \n\u003e If only `include` part is required, you can simplify it to `external: [...]`.  \n\n**alias:** `{ name: alias, ...}` or `['name:alias', ...]`, define aliases, then you can use alias instead of name/path in your codes.  \n\u003e In fact, you can define aliases in `root.alias` (global) or `root.[require|external].include` (append to name, like this `name:alias`), and later will override former if conflict.  \n\n**mainfiles:** `{ name: mainfile, ...}`, specify which file you want to use as the main (entry) file for a package  \n\u003e It's specially useful when a package hasn't a `bower.json`.  \n\n_p.s. with `browserify-bower`, you can also only **require** a sub module instead of a full module, by say 'base62/lib/base62'._\n\n\n## Command Line\nUse conf file,\n```shell\n$ browserify entry.js -d -p [browserify-bower --conf conf.json] \u003e bundle.js\n```\nUse a node of the conf json,\n```shell\n$ browserify entry.js -d -p [browserify-bower --conf conf.json --confnode aa.bbb] \u003e bundle.js\n```\n\n## workdir\nBy default, `browserify-bower` will try to find the working bower components dir from the dir of `process.cwd()`. But you can specify another one.\n\nIn programmatic API, pls use like `b.plugin(browserifyBower.workdir(thedir), {..})`.\nIn command line, pls use parameter `--workdir thedir`.\n\n\n\u003e p.s. pls feel free to use it side by other plugins/transforms, since it's a standard [`browserify`](https://github.com/substack/node-browserify) plugin, no hack, no change to your codes.\n\n\n# run test\n_You need ensure related node modules (for `browserify-bower`) and bower components (for test codes) installed, then run `npm test`._\n\nFor first time, you can do it like this:\n```sh\nbrowserify-bower $ npm install\n...\nbrowserify-bower $ cd test\nbrowserify-bower/test $ bower install\n...\nbrowserify-bower/test $ cd ..\nbrowserify-bower $ npm test\n\n\t\u003e browserify-bower@0.5.0 test ~/repos/browserify-bower\n\t\u003e mocha\n\n\n\t  ....\n\n\t  4 passing (580ms)\n\nbrowserify-bower $\n```\n# diffenence with `debowerify`\n`browserify-bower` and `debowerify` try to resolve same problem, but by different ways.  \n_(p.s. in fact, browserify-bower's test codes were copied and modified from `debowerify`, thanks so much ^^)_\n\n**debowerify's way:** analyze every js files of the application, to find/replace require string for bower components with their real paths  \n**browserify-bower's way:** pre resolve specified bower components and require them to browserify, then when required, they're already there\n\n#### Comparison of `browserify-bower` and `debowerify`:  \n|                             |   browserify-bower            |  debowerify                                    |\n| --------------------------- | ----------------------------- | ---------------------------------------------- |\n| require submodules \u003cbr\u003e _(in application codes)_ | support \u003cbr\u003e _(built-in)_ | support \u003cbr\u003e _(built-in)_ |\n| require ... in html/template files | OK               | not OK \u003cbr\u003e _(since it doesn't anaylze html/template files)_ |\n| individual require/external \u003cbr\u003e _(in build scripts)_ | easy \u003cbr\u003e _(with options)_ | not so easy \u003cbr\u003e _(through `bower-resolve`)_ |\n| extension type              | plugin                        | transform                                                           |\n| work mode                   | synchronous                   | asynchronous \u003cbr\u003e _(since it depends on bower's resolving results)_ |\n| performance                 | slight and quickly \u003cbr\u003e _(~ 2s to build a project of mine)_ | slowly \u003cbr\u003e _(13 ~ 14s to build the same project)_ \u003cbr\u003e _(since it analyzes every js files of the application)_ |\n\n\n# history\nv0.6.0 (9-Aug-2015):  \n1) add mainfiles option, which allows specification of the main file for packages without a bower.json  \n2) enhancement: alias configs under options or 'require'/'external', can be also `{ name: alias, ... }`, except `['name:alias', ...]`  \n\nv0.5.0 (24-July-2015):  \n1) allow alias to be configured from an sibling node of 'require'/'external', too  \n2) enhancement: if an item existed in both 'require' and 'external' lists, let's remove it from 'require' list  \n\nv0.4.0 (20-Dec-2014):  \n1) add command line support  \n\nv0.3.0 (14-Aug-2014):  \n1) built-in support for submodules  \n2) enhancement: if bower.main undefined, check 'index.js' then 'compname'.js\n\nv0.2.0 (25-July-2014):  \n1) added tests  \n2) document improvement  \n3) logic change: include all components declared in `dependencies` and `devDependencies` of bower.json, not only `dependencies`, if options..include undefined  \n4) enhancement: allow to specify workdir, where to determine bower components' home dir; default `process.cwd()`\n\nv0.1.0 (22-July-2014):  \n1) first release (works fine in my personal project)\n\n# license\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftminglei%2Fbrowserify-bower","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftminglei%2Fbrowserify-bower","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftminglei%2Fbrowserify-bower/lists"}