Package managers for Frontend Developer
Puchkov Vladimir, DEWEB Studio
Puchkov Vladimir, DEWEB Studio
Puchkov Vladimir, DEWEB Studio
A long time ago in a galaxy far, far away... There was the Frontender Hero, that could make everything. HTML, CSS and JS was piece of cake for him.
He thought... Why? Why I should do all that task by myself. Backend developers are so rude. They think only of themselves...
Drupal7, Drupal 8, Twig, style me that, style me this...
But I can over wrap all that into div, sorry!
He thought... Why? Why I should do all that task by myself. Every time I should install all JS libraries from the begining, search for update, delete previous etc.
Why every developer has a package manager, but frontend developer no?
I'll fix that! Beware!
I made my package manager with preferance and accessible female packages!!!
A package manager or package management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing computer programs for a computer's operating system in a consistent manner.
A package manager deals ffwith packages, distributions of software and data in archive files.
Packages contain metadata, such as the software's name, description of its purpose, version number, vendor, checksum, and a list of dependencies necessary for the software to run properly.
Upon installation, metadata is stored in a local package database.
Package managers are designed to eliminate the need for manual installs, search and updates.
sudo npm install bower -g
After install check the version to verify:
bower --versionbower -v
Search package
bower search jquerybower s jquery
Installation of the package:
bower install jquerybower i jquery
It's important to understand and remember, that it's provide you method of plugin the libraries as AMD and Common.js. It only mount the packages that you need with their dependencies. All other things on sight of developer.
Check the installed packages
bower list
Information about the installed packages
bower info
Uninstall package
bower uninstall jquery
Specific version of package
bower install jquery#1.6.1
Updating the package
bower update jquery
Specific version of package
bower install jquery#3.1.1
Resolution
Unable to find a suitable version for jquery,please choose one by typing one of the numbers below:1) jquery#^1.0.1 which resolved to 1.12.4 and is required by bower2) jquery#^3.1.1 which resolved to 3.1.1
Semantic versioning - http://semver.org/lang/ru/
How to advoid dependencies hell, for backward compatibility
#2.1.4 = 2.1.4#~2.1.4 >= 2.1.4 < 2.2.0#^2.1.4 >= 2.1.4 < 3.0.0
Let's make some practise
bower i jquery#1.0.1bower update jquery
Add ~ in manifest file
bower update jquery
Change ~ to ^
bower update jquery
Change ^ to latest
bower update jquery
But the real deal of using bower is implement it with Manifest file.
We can add it by hands or with use of command
bower init
Let's take a look closely to this command
name - only field neccessary to be filled, name of the project
version - three digit number
author - author of the project
ignore - ignore pathes, that we want to be ignored
dependencies - dependencies of your project
main file - file that will be targeting to the --path that used gulp, grunt
description, keyword - helps to find your package
licence - licence of using your package
Initialize dependencies to manifest file:
bower init
Add dependencies to the file
"dependencies": {"jquery": "^3.1.1","snap.svg": "latest"}
Then just install
bower install
If we want to add to dependencies
bower install jquery --savebower install jquery -S
If we want to add to to developer dependencies
bower install jquery --save-devbower install jquery -D
Uninstall from project and bower.json
bower uninstall jquery --savebower uninstall jquery --save-devbower uninstall jquery normalize.css -D
Packages with own dependencies
For example bootstrap
bower install jquery#1.0.1 --savebower i bootstrap -S
If we have a conflict in dependencies
"resolutions": {"jquery": "1.9.1 - 3"}
Let's create own package
Create git repository for our package
Clone it
Initialize bower install
bower init
Add file, commit and push with tag
git add bower.jsongit commit -m "Add bower.json"git tag "v0.0.1"git push origin master --tagsgit register [name] [path to git repository]
Remove package from bower
bower login
Use data from your GIThub
? Username Vladimir? Password ********bower EAUTH Logged in as VladimirPuchkovbower unregister [name]
? You are about to remove component [name] from the bowerregistry (https://bower.herokuapp.com). It is generally considered badon behavior to remove versions of a library thatothers are depending on. Are you really sure?
YES
cache
$ bower cache <command> [<args>]
Manage bower cache
cache clean
$ bower cache clean$ bower cache clean <name> [<name> ...]$ bower cache clean <name>#<version> [<name>#<version> ..]
cache list
Lists cached packages
$ bower cache list$ bower cache list <name> [<name> ...]
help
Display help information about Bower
$ bower help <command>
home
Opens a package homepage into your favorite browser.
$ bower info <package>$ bower info <package> [<property>]$ bower info <package>#<version> [<property>]$ bower info <package>#&l;tversion> [&l;t;property>] [<options>]
Displays overall information of a package or of a particular version.
init
Interactively create a bower.json file
$ bower init
install
Installs project dependencies recursively.
$ bower install [<options>]$ bower install <endpoint> [<endpoint> ..] [<options>]
When --save flag is used, all additional endpoint are saved to dependencies in bower.json.
Endpoints can have multiple forms:
Where:
Package can be any one of the following:
| Registered package name | jquery normalize.css |
| Git endpoint | https://github.com/user/package.git git@github.com:user/package.git |
| Git endpoint without .git | git+https://github.com/user/package git+ssh://git@github.com/user/package |
| Local folder | my/local/folder/ |
Package can be any one of the following:
| Public Subversion endpoint | svn+http://package.googlecode.com/svn/ |
| Private Subversion endpoint | svn+ssh://package.googlecode.com/svn/ svn+https://package.googlecode.com/svn/ |
| Shorthand (defaults to GitHub) | user/package |
Package can be any one of the following:
| URL | http://example.com/script.js http://example.com/style.css http://example.com/package.zip (contents will be extracted) http://example.com/package.tar (contents will be extracted) |
A version can be:
| semver version | #1.2.3 |
| version range | #1.2 #~1.2.3 #^1.2.3 #>=1.2.3 <2.0 |
| Git tag | #<tag> |
| Git commit SHA | #<sha> |
A version can be:
| Git branch | #<branch> |
| Subversion revision | #<revision> |
install options:
link
The link functionality allows developers to easily test their packages. Linking is a two-step process.
$ bower link$ bower link <name> [<local name>]
Using ‘bower link’ in a project folder will create a global link. Then, in some other package, bower link <name> will create a link in the components
folder pointing to the previously created link.
This allows you to easily test a package because changes will be reflected immediately. When the link is no longer necessary, simply remove it with bower uninstall <name>.
list
List local packages and possible updates.
$ bower list [<options>]
list options
lookup
Look up a package URL by name
$ bower lookup <name>
login
Authenticate with GitHub and store credentials. Required to unregister packages.
$ bower login
login options
https://github.com/settings/tokens
prune
Uninstalls local extraneous packages
$ bower prune
register
Register a package
$ bower register <name> <url>
search
Finds all packages or a specific package.
$ bower search$ bower search <name>
update
Updates installed packages to their newest version according to bower.json.
$ bower update <name> [<name> ..] [<options>]
uninstall
Uninstalls a package locally from your bower_components directory
$ bower uninstall <name> [<name> ..] [<options>]
unregister
Unregisters a package
$ bower unregister <package>
version
Run this in a package directory to bump the version and write the new data back to the bower.json file.
$ bower version [<newversion> | major | minor | patch]
The newversion argument should be a valid semver string, or a valid second argument to semver.inc (one of “build”, “patch”, “minor”, or “major”). In the second case, the existing version will be incremented by 1
in the specified field
If run in a git repo, it will also create a version commit and tag, and fail if the repo is not clean.
If supplied with --message (shorthand: -m) config option, bower will use it as a commit message when creating a version commit. If the message config contains %s then that will be replaced with the resulting version number.
force
Makes various commands more forceful
-f, --force
json
Output consumable JSON
-j, --json
loglevel
What level of logs to report. Possible values: error, conflict, warn, action, info, debug
-l, --loglevel
offline
Do not use network connection
-o, --offline
quiet
Only output important information. It is an alias for --loglevel=warn.
-q, --quiet
silent
Do not output anything, besides errors. It is an alias for --loglevel=error. Silent is also useful if you have private components that might leak credentials to your CI environment.
-s, --silent
verbose
Makes output more verbose. It is an alias for --loglevel=debug.
-V, --verbose
allow-root
Allows running commands as root. Bower is a user command, there is no need to execute it with superuser permissions. However, if you still want to run commands with sudo, use --allow-root option.
--allow-root
You can use build tools to easily consume Bower packages such as Gulp and Grunt
If you use bower list --paths or bower list --paths --json, you will get a simple name-to-path mapping:
{"backbone": "bower_components/backbone/backbone.js","jquery": "bower_components/jquery/dist/jquery.js","underscore": "bower_components/underscore/underscore.js"
Bower provides a powerful, programmatic API. All commands can be accessed through the bower.commands object.
var bower = require('bower');bower.commands.install(['jquery'], { save: true }, { /* custom config */ }).on('end', function (installed) {console.log(installed);});
Bower will skip some interactive operations if it finds a CI environmental variable set to true. You will find that the CI variable is already set for you on many continuous integration servers, e.g., CircleCI and Travis-CI. More info https://bower.io/docs/api/#running-on-a-continuous-integration-server
Bower is used together with other tools to integrate with all sorts of setups and workflows. Gulp, Grunt, Rails, Ruby, Java, Apps & IDEs and more https://bower.io/docs/tools/
Bower can be configured using JSON in a .bowerrc file. For example:
{"directory": "app/components/","timeout": 120000,"registry": {"search": ["http://localhost:8000","https://bower.herokuapp.com"
The config is obtained by merging multiple configurations by this order of importance
More about configuration
Pluggable resolvers allow you to use resolvers created by 3rd party JavaScript developers — including overriding default resolvers used by Bower. More https://bower.io/docs/pluggable-resolvers/
The main difference npm from Bower - way of mounting dependencies of packeges. npm install them for every package separately. So we have something like that node_modules/grunt/node_modules/glob/node_modules/… where can be several versions of the same package. In the client JS this is forbidden: you can't plug two different versions of the same library of jQuery for example. In the Bower we have only one version of the package, Bower will depricate this, to warn us.