Best practice for front end library management using Bower - bower

I want to use bower add manage my library, my question is along with the js files, it always comes with some extra json or git related files. I don't want to push those files to the client, is there a recommended way rather than extract js filed manually?

Bower allows you define in your bower.json file a list of files it will ignore when installing your package:
ignore
Recommended Type: Array of String
A list of files for Bower to ignore when installing your package.
Note: README (all variants of case, .md, .text) and bower.json will
never be ignored.
The ignore rules follow the same rules specified in the gitignore pattern spec.
For example:
{
"name": "my-project",
"version": "1.0.0",
"main": "path/to/main.css",
"ignore": [
".jshintrc",
"**/*.txt"
],
...
}
Another option is keeping only the files you want to distribute in the Git tags which represents you package versions.

Related

Install package into custom directory Composer

Hey I am trying to install a package into a custom 'admin' directory using composer.
Here is my JSON:
{
"name": "frontier/installer",
"description": "The best front end engineer package around",
"require": {
"aheinze/cockpit": "*"
},
"extra":{
"installer-paths":{
"admin": ["aheinze/cockpit"]
}
}
}
Now when I run composer install it all installs but defaults to vendor/aheinze/cockpit I cannot for the life of me figure out why.
Have done my research this should be the right code... any obvious errors?
Cheers.
I have implemented this composer plugin to install packages into user (custom) defined folders you can just include it in your composer.json, follow the example and tell me if you have more questions :)
https://github.com/mnsami/composer-custom-directory-installer
composer-custom-directory-installer
A composer plugin, to install differenty types of composer packages in custom directories outside the default composer default installation path which is in the vendor folder.
This is not another composer-installer library for supporting non-composer package types i.e. application .. etc. This is only to add the flexability of installing composer packages outside the vendor folder. This package only supports composer package types,
https://getcomposer.org/doc/04-schema.md#type
The type of the package. It defaults to library.
Package types are used for custom installation logic. If you have a package that needs some special logic, you can define a custom type. This could be a symfony-bundle, a wordpress-plugin or a typo3-module. These types will all be specific to certain projects, and they will need to provide an installer capable of installing packages of that type.
How to use
Include the composer plugin into your composer.json require section::
"require":{
"php": ">=5.3",
"mnsami/composer-custom-directory-installer": "1.1.*",
"monolog/monolog": "*"
}
In the extra section define the custom directory you want to the package to be installed in::
"extra":{
"installer-paths":{
"./monolog/": ["monolog/monolog"]
}
by adding the installer-paths part, you are telling composer to install the monolog package inside the monolog folder in your root directory.
As an added new feature, we have added more flexibility in defining your download directory same like the composer/installers, in other words you can use variables like {$vendor} and {$name} in your installer-path section:
"extra": {
"installer-paths": {
"./customlibs/{$vendor}/db/{$name}": ["doctrine/orm"]
}
}
the above will manage to install the doctrine/orm package in the root folder of your project, under customlibs.
Note
Composer type: project is not supported in this installer, as packages with type project only make sense to be used with application shells like symfony/framework-standard-edition, to be required by another package.
If you want to use the installer-paths option the package you want to be installed in a different path must require composer/installers.
In your case the aheinze/cockpit package doesn't require composer/installers as you can see in its composer.json at github.
Have a look at the composer documentation for custom paths and you see that it tells you:
Note: You cannot use this to change the path of any package. This is only applicable to packages that require composer/installers and use a custom type that it handles.
This means you are not able to change the install path of this specific package.
Anyway I don't see any necessity to install it into any different directory from the default vendor folder.
If you just need to put all packages under the "admin" directory, the best option is:
{
"config": {
"vendor-dir": "admin"
}
}
You can use the post-autoload-dump script to copy the package after install/dump-autoload:
"scripts": {
"post-autoload-dump": [
"cp -r vendor/aheinze/cockpit admin"
]
},
For install multiple packages in the same directory you can follow this structure
1- your path should be like this "modules/patched/{$name}"
2- and an array of any package that you want to move or install that same directory
"extra":{
"installer-paths": {
"modules/patched/{$name}": [
"drupal/signature_field",
"drupal/eck",
"drupal/auto_entitylabel"
]
}
The package or module should be in your require section as well.
"require": {
"composer/installers": "^1.0.24",
"drupal/auto_entitylabel": "2.x-dev",
"drupal/signature_field": "^1.0#RC",
"drupal/eck": "^1.0#alpha",
}

What is the "main file" property when doing bower init?

What is the use of property main file when you run bower init? I have been looking and many people says that it currently has no purpose.
Is that true? Bower's documentation doesn't explain it either.
According to the Bower.io documentation
main
Recommended Type: String or Array of String
The primary acting files necessary to use your package. While Bower
does not directly use these files, they are listed with the
commands bower list --json andbower list --paths, so they can be used
by build tools.
Preprocessor files like CoffeeScript should be compiled.Do not include
minified files.Filenames should not be versioned (Bad:
package.1.1.0.js; Good: package.js).
I think it's more for the package management, and build tools like Grunt and Brunch. For example, Bootstrap's bower.json looks like :
{
"name": "bootstrap",
"version": "3.0.3",
"main": [
"./dist/css/bootstrap.css",
"./dist/js/bootstrap.js",
"./dist/fonts/glyphicons-halflings-regular.eot",
"./dist/fonts/glyphicons-halflings-regular.svg",
"./dist/fonts/glyphicons-halflings-regular.ttf",
"./dist/fonts/glyphicons-halflings-regular.woff"
],
"ignore": [
"**/.*",
"_config.yml",
"CNAME",
"composer.json",
"CONTRIBUTING.md",
"docs",
"js/tests"
],
"dependencies": {
"jquery": ">= 1.9.0"
}
}
When I build in Brunch, it pulls these files from my bower_components folder in my public folder.
According to Bower's JSON Specification (https://github.com/bower/spec/blob/master/json.md#main), the "main" property is used to list the files primarily used in the project. The files listed are not actually used by Bower in any way, they are apparently there for the purpose of being used by other build tools.
Here is the official specification:
main
Recommended
Type: String or Array of String
The primary acting files necessary to use your package. While Bower does not directly use these files, they are listed with the commands bower list --json and bower list --paths, so they can be used by build tools.
Preprocessor files like CoffeeScript should be compiled.
Do not include minified files.
Filenames should not be versioned (Bad: package.1.1.0.js; Good: package.js).

"ignore" in Bower's bower.json?

Bower's website describes the ignore key in bower.json:
ignore [array]: An array of paths not needed in production that you want Bower to ignore when installing your package.
Does this mean that it's ignoring paths in installed components, or in your package? Or something else? I was confused by this.
TL;DR:
ignore only works within the scope of packages being installed, ignoring matching patterns.
Somewhat longer answer:
Bower will ignore all files matching the patterns specified in the ignore property of bower.json in installed packages.
So, suppose if you ran bower install someBowerPackage which had following structure:
someBowerPackage
|- css/
|- js/
|- index.html
|- bower.json
with a bower.json file having:
{
...
"ignore": [ "index.html" ]
}
then, index.html file of this someBowerPackage will not be installed within this package.
ignore is related to the files in your package
You can't ignore on behalf of other packages
Dependencies are loaded all or none
ignore values are only applied to packages fetched from a bower install endpoint by that component's bower.json file.
ignore values specified in project-root/bower.json have no effect on packages fetched as that project's components.
The bower.json Spec has been documented in its own github repo since this question was originally asked.
Ignore
Recommended
Type: Array of String
A list of files for Bower to ignore when installing your package.
Note: symbolic links will always be ignored. However bower.json will never be ignored.
The ignore rules follow the same rules specified in the gitignore pattern spec.
Files matching globs or file values in ignore will not be downloaded from an endpoint as part of the package.

How to rename a component in installed with Bower

Given that bower support installing items that do not technically exist in the global bower namespace the following problem can arise.
Bower install https://github.com/bitovi/canjs.com/archive/v1.1.6.zip
results in
Components
|- v1.1.6
|--bower.json
|-- (complete installation of all required pieces here).
This can lead to potential confusion and maintenance problems down the road as it is now on the developer to recall that "can.js" lives in v1.1.6. Clearly there are fixes that one can implement (i.e. pointing all items using can.js to this directory) but this doesn't solve the core problem.
bower.json looks like this:
{
"name": "v1.1.6",
"main" : "",
"version": "0.0.0",
"repository": {
"type": "asset",
"url": "https://github.com/bitovi/canjs.com/archive/v1.1.6.zip"
}
}
Is renaming the directory and updating the bower.json enough or is there another resource that needs to be updated as well?
Yes updating bower.json is enough. In the next bower major release (1.0.0), you can name a package when installing. In your case you would so something like this:
bower install canjs=git://github.com/bitovi/canjs.com.git#~1.1.6
You can try out this new feature by installing bower-canary: npm install -g -f bower-canary

bower install take repo, not specific files in main

I am trying to install some js files via bower. My repo has a bower.json with a main property, however the whole repo gets installed to components/, not just the files in the dist/custom/ dir.
Here is what my bower.rc looks like
{
"name": "jquery-m",
"version": "2.0.2mup",
"description": "Meetup custom build of jQuery 2.0, used on mobile",
"main": [ "./dist/custom/" ],
"license": "MIT"
}
Is this the way bower is supposed to work? I thought it was possible just to specify certain files with your main property.
Yes, this is how Bower is meant to work. Bower-installer looks like a more lightweight solution than Grunt to solve the exact requirement you're describing and get just the files you need to be deployed to production.
Yes, that's how Bower works.
It always look for the matching tag on the repo; if cannot find one, it goes with the default branch, and download it.
The unique usage I've seen so far for the main property of a bower.json file is for integration, for example with build tools, like Grunt (there are lots of other bower related tasks, just Google around) and others.
This is a common misconception.
As stated in Bower documentation, the main property is a string/array listing the primary endpoints of your package.
Bower package maintainers (and maybe users, using the overrides property) can use the ignore property, which is an array of paths not needed in production that you want Bower to ignore when installing your package.
Example:
{
"name": "stackoverflow",
"version": "1.0.0",
"ignore": [
"test/**",
".jshintrc"
],
"dependencies": {
"foo": "~1.1"
}
}

Resources