I am using bower to install dependencies for my project(I know there is yeoman but I am using bower). After setting up component.json file, when I do bower install it installs dependencies to correct directory but it install lots of other unnecessary files with it too. Now I want bower to install the specific file which is needed for example jquery.js, backbone.js and underscore.js and nothing else. How can I do it with bower?
I recently wrote up a possible solution to this problem and will highlight the main points below.
If you know you want a specific file from a particular package, it is easy enough to tell bower to only grab that file. For instance, with normalize.css, the only file that I care about is, well, normalize.css. So instead of typing:
bower install --save normalize-css
I can be more specific and tell bower to just download the css file:
bower install --save https://raw.github.com/necolas/normalize.css/master/normalize.css
That, of course, will always grab the latest version of normalize from the repository's master branch when bower install is invoked for your project. If, however, I want to make sure I always get the 3.0.0 version of normalize, then I can dig through the releases/history to find the appropriate URL and viola:
bower install --save http://necolas.github.io/normalize.css/3.0.0/normalize.css
You can check out bower-installer.
bower list --path usually tells about the main js file in the package, which bower-installer conveniently picks up and exports only those files to your asset directories. You can then use this directory instead and ignore the bower_components dir.
It's up to the package authors to specify what files to exclude from the package using the ignore property. For now just include the files you want in the your app/website and ignore the rest.
Related
My professor wants us to submit our project for our node.js app but we are not allowed to include node_modules in the submission.
When I try to run the app without the folder in there, it crashes due to missing dependencies.
Am i missing a step?
Presumably either
you're not supposed to use third-party dependencies in your solution (just the core Node.js modules), or
you're not supposed to include node_modules in your submission (which is good practice anyway), but instead just have a package.json (and possibly a lockfile) so your instructor can npm i / yarn to install the packages.
When building an app that has node_modules you aren't supposed to include this anyway.
Install any node_modules that are required for your application to run and when sibmitting just leave out the node_modules folder.
Your package file will include everything that your instructor can check over or install on their end if necessary.
I found this random example on github: https://github.com/hayanisaid/nextjs-intro-example
As you can see by looking they have there package files but no node_modules, when you clone this repo you would run npm install which would create and install the packages
package.json contains information about node modeuless.
If u deleted node modules, you just have to run npm i --save.
All the dependency will be downloaded through this.
Just use npm/yarn install if you remove the folder.
There are two packages plotly.js and plotly.js-dist.
What is the difference between them and which one should I use?
Moreover on npmjs.org on plotly.js page it says in order to install plotly.js one have to run:
npm install plotly.js-dist
I mean, I can see that plotly.js is a project with many files, and that plotly.js-dist is a bundle, just one file. But I don't get why it is distributed like this.
Especially, that plotly.js-dist is not minified, and in plotly.js there is minified file, which I guess can be used in order to import this library to one's project.
These files are same. I checked and compared.
If you using npm + typescript(+Angular), I recommend to use option , npm install plotly.js-dist.
If you using npm(or not) + javascript, I recommend to use option 3 with plotly.min.js.
Don't mention minified or not. Because after bundling every module minified.
So, it's up to you which file need to see via developer tool while debugging.
Here is Quick start options.
Install with npm : npm install plotly.js-dist.
Ready-to-use plotly.js distributed bundle.
Contains trace modules, visit here
Use the plotly.js CDN hosted by Fastly.
Download the latest release : plotly.js or plotly.min.js. More info here.
It doesn't matter what you choose but it is different slightly how to bundle/deploy your project.
And using definition file. #types/plotly.js
For further information from here, check Bundle information section.
Also, if you work with angular? here is another option : angular-plotly.js.
This is my answer for your second phrase.
"plotly.js" is hard to set it up for bundling.
Here is what I've done with this and my goal was:
Working on angular2-seed with Angular 4.
Fully defined each type/interface.
Step 1. Install package.
npm install plotly.js-dist --save
npm install #types/plotly.js --save
npm install #types/d3 --save
Note: #types/d3 is dependency of #types/plotly.js. but if you don't need it, remove it from index.d.ts.
Step 2. rename folder to use definition file.
Rename folder "plotly.js" to "plotly.js-dist" in "node_modules/#types".
Sometimes it's useful to rebuild an entire site and force bower to reinstall new versions of all the packages in bower.json.
However, there doesn't seem to be any way of doing that:
Attempt #1:
$ bower uninstall
bower not-installed 0
Nope, that only works on a package-by-package basis, even though a clean 'bower install' uses bower.json.
Attempt #2:
$ bower install -f -l 0
$
Nope, despite '-f', this does absolutely nothing if the dependencies are met.
Attempt #3:
$ rm -r bower_components
$
! Ah victory! ... wait, what's this?
rm: bower_components: No such file or directory
Oh darn, there's a .bowrc in this project that sets the directory to install things to.
My current terrible solution:
Run custom script that:
- Parse .bowerrc if one exists
- Load the directory if one is specified in the json block
- If the directory currently exists...
- ...recursively delete the directory.
It works, I suppose, but it's pretty annoying to have to setup repeatedly.
Am I missing something?
Is there not just a simple bower command to delete the local installed modules?
Seems like really basic functionality I would expect bower uninstall to do.
(This isn't really a very javascript question, but I'll happily accept something that hooks into the bower module somehow to make this happen in a simple node script)
Context
Edit: If you want 'motivation' for such a task, it's this: We have a jenkins server that builds our projects and runs tests. However, periodically it fails for no obvious reason; investigating, it's almost always because jenkins is using a previous copy of the repository with just a git-pull to update to the most recent version before building and running tests; as a result, the previous bower_components directory is there, and it is full of cached copies of the various components.
Here a few example of things which are ##$##$'d and require bower to be run again as a forced install:
1) Some idiot (>_> fitvids) deletes the previous tagged release of a project.
2) Some project has dropped off of bower / moved its github page
3) Some project (>_> jquery) has changed the way the files are laid out in a non-major version revision.
I realize that the 'correct' solution to this problem is: fix jenkins so it creates a new temporary directory for each build. ...but that's not in my control.
So, as a build step, I need to automate a way to delete the bower components and force them to all be reinstalled; either as a grunt task (part of the build) or a jenkins build step. However, remember from (3) above, that our projects use .bowerrc, so it's not as simple as simply deleting a folder.
It would be great if I could uninstall all the existing bower components as a pre-build step to make this work.
So... back to the question: Can this be done with bower?
Updated Answer
If you're trying to update all of your packages, use
$ bower update
Original Answer
Go to your bower.json file and remove all of the components, or libraries, that you want to uninstall from devDependencies.
After you have removed the ones you want gone, execute -
$ bower prune
start with -
"devDependencies": {
"angular": "~1.2.15",
"angular-ui-router": "~0.2.10",
"moment": "~2.5.1"
}
remove angular references from file -
"devDependencies": {
"moment": "~2.5.1"
}
execute
$ bower prune
watch your angular dependencies get uninstalled
how about
edit the bower.json
'rm -Rf bower_components/*'
bower install
I was trying to upgrade to polymer 0.2.4 from 0.2.3. I can't seem to find a quick way to uninstall a set of dependencies. So I just manually removed those polymer* dir under bower_components. But for some reason bower kept remembering I had 0.2.3 installed event with bower.json modified. A 'rm -Rf bower_component/*' seems to do the tricks.
Actually I do something a little bit tricky but it works for me:
for package in $(ls your_bower_components_folder); do bower uninstall "$package"; done;
bower install
Uninstalling Packages
To remove a package you can use the uninstall command followed by the name of the package you wish to remove.
bower uninstall
It’s possible to remove multiple packages at once by listing the package names.
bower uninstall jquery modernizr sass-bootstrap
Adapting Jumar Polanco's answer to use it in Powershell, it is possible to programmatically uninstall bower components in the following way:
In the Powershell interface, navigate to the location where bower.json and the bower_components folder is located. Usually is the root app folder.
Then you can run:
foreach($package in ls bower_components){bower uninstall $package}
Depending on what the packages dependencies are, it may be required to pay extra attention to the process, as some prompts which require extra input (Y/n) to continue the process may arise (such as dependency conflicts).
I don't know what build tools you use, but if it includes Grunt with grunt-bowercopy, you could use the clean option. It removes the bower_components folder (or whatever you've configured it to use) after copying out the required files.
Ideally, I'd prefer something that didn't require me to re-download all the dependencies with each build, but just the ones where doing a fresh install would find a newer version.
I'm looking for a better solution to this as well, so I'll update if I find one.
I've been using nombom to do this (as a bonus, it also re-installs your npm packages from scratch):
https://www.npmjs.com/package/nombom
This is what ended up working for me via Windows cmd prompt:
forfiles /p .\bower_components /c "cmd /c cd .. && bower uninstall #fname"
When I want to add a package (and check in the dependency into git), where does it belong - into package.json or into bower.json?
From what I gather,
running bower install will fetch the package and put it in /vendor directory,
running npm install it will fetch it and put it into /node_modules directory.
This SO answer says bower is for front-end and npm is for backend stuff.
Ember-app-kit seems to adhere to this distinction from the first glance... But instructions in gruntfile for enabling some functionality give two explicit commands, so I'm totally confused here.
Intuitively I would guess that
npm install --save-dev package-name would be equivalent to adding the package-name to my package.json
bower install --save package-name might be the same as adding the package to my bower.json and running bower install?
If that is the case, when should I ever install packages explicitly like that without adding them to the file that manages dependencies (apart from installing command line tools globally)?
Npm and Bower are both dependency management tools. But the main difference between both is npm is used for installing Node js modules but bower js is used for managing front end components like html, css, js etc.
A fact that makes this more confusing is that npm provides some packages which can be used in front-end development as well, like grunt and jshint.
These lines add more meaning
Bower, unlike npm, can have multiple files (e.g. .js, .css, .html, .png, .ttf) which are considered the main file(s). Bower semantically considers these main files, when packaged together, a component.
Edit: Grunt is quite different from Npm and Bower. Grunt is a javascript task runner tool. You can do a lot of things using grunt which you had to do manually otherwise. Highlighting some of the uses of Grunt:
Zipping some files (e.g. zipup plugin)
Linting on js files (jshint)
Compiling less files (grunt-contrib-less)
There are grunt plugins for sass compilation, uglifying your javascript, copy files/folders, minifying javascript etc.
Please Note that grunt plugin is also an npm package.
Question-1
When I want to add a package (and check in the dependency into git), where does it belong - into package.json or into bower.json
It really depends where does this package belong to. If it is a node module(like grunt,request) then it will go in package.json otherwise into bower json.
Question-2
When should I ever install packages explicitly like that without adding them to the file that manages dependencies
It does not matter whether you are installing packages explicitly or mentioning the dependency in .json file. Suppose you are in the middle of working on a node project and you need another project, say request, then you have two options:
Edit the package.json file and add a dependency on 'request'
npm install
OR
Use commandline: npm install --save request
--save options adds the dependency to package.json file as well. If you don't specify --save option, it will only download the package but the json file will be unaffected.
You can do this either way, there will not be a substantial difference.
Update for mid 2016:
The things are changing so fast that if it's late 2017 this answer might not be up to date anymore!
Beginners can quickly get lost in choice of build tools and workflows, but what's most up to date in 2016 is not using Bower, Grunt or Gulp at all! With help of Webpack you can do everything directly in NPM!
Google "npm as build tool" result:
https://medium.com/#dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa
Webpack: https://webpack.github.io/docs/installation.html
Don't get me wrong people use other workflows and I still use GULP in my legacy project(but slowly moving out of it), but this is how it's done in the best companies and developers working in this workflow make a LOT of money!
Look at this template it's a very up-to-date setup consisting of a mixture of the best and the latest technologies:
https://github.com/coryhouse/react-slingshot
Webpack
NPM as a build tool (no Gulp, Grunt or Bower)
React with Redux
ESLint
the list is long. Go and explore!
Your questions:
When I want to add a package (and check in the dependency into git),
where does it belong - into package.json or into bower.json
Everything belongs in package.json now
Dependencies required for build are in "devDependencies" i.e. npm install require-dir --save-dev (--save-dev updates your package.json by adding an entry to devDependencies)
Dependencies required for your application during runtime are in "dependencies" i.e. npm install lodash --save (--save updates your package.json by adding an entry to dependencies)
If that is the case, when should I ever install packages explicitly like that without adding them to the file that manages dependencies (apart from installing command line tools globally)?
Always. Just because of comfort. When you add a flag (--save-dev or --save) the file that manages deps (package.json) gets updated automatically. Don't waste time by editing dependencies in it manually. Shortcut for npm install --save-dev package-name is npm i -D package-name and shortcut for npm install --save package-name is npm i -S package-name
I'm digging into a node package that uses a CLI, and am trying to extend it by adding some functionality. I've cloned the repo from github, but I've also installed it via npm.
How can I use my local version, instead of the one that's been installed via npm?
Thanks!
When you install a package using npm, it just puts it into the node_modules folder in the folder where you ran it (or if you pass -g, into a global node_modules folder).
require() uses a particular search order to find modules. To get a specific version of a module to load you can take two paths:
Specify a relative path to the module: require("./path/to/myfork/of/module")
Delete the version of the module installed by npm into mode_modules and put your fork of it in there
Make sure that your fork of that module is in a "closer" node_modules folder. Node searches the node_modules in same folder as the file calling require() and then works its way up the folder hierarchy to find a module.
For more information, take a look at http://nodejs.org/docs/v0.4.11/api/modules.html