This question already has answers here:
Difference between Grunt, NPM, and Bower (package.json vs bower.json)
(2 answers)
Closed 5 years ago.
What is the difference between package.json vs bower.json.?
what is the criteria that we should consider before defining the dependencies in both files.
And what difference will it make by running "bower install" and "npm install" ?
NPM (package.json)
npm is most commonly used for managing Node.js modules, but it works for the front-end too when combined with Browserify and/or $ npm dedupe.
Bower (bower.json)
Bower is created solely for the front-end and is optimized with that in mind. The biggest difference is that npm does nested dependency tree (size heavy) while Bower requires a flat dependency tree (puts the burden of dependency resolution on the user).
A nested dependency tree means that your dependencies can have their own dependencies which can have their own, and so on. This is really great on the server where you don't have to care much about space and latency. It lets you not have to care about dependency conflicts as all your dependencies use e.g. their own version of Underscore. This obviously doesn't work that well on the front-end. Imagine a site having to download three copies of jQuery.
In short, NPM aims for stability. Bower aims for minimal resource load. If you draw out the dependency structure.
npm dependencies are defined or added to package.json. Bower dependencies are in bower.json.
** Package.json file is for node related package manager while bower can manage application level package dependencies. I like bower more.
** We need to find which dependencies related to development and which are production.
** "bower install" -- Install all dependencies mentioned in Dependencies object.
** "bower install -D" -- Install all dependencies mentioned in DevDependencies object.
Same with Npm Install and npm install -D
Related
hi i have a problem when i create creat app it build with yarn and i didn't use yarn in my life and when i use npm to install any think it show a problems i tried to use (create-react-app my-project --use-npm) and i removed yarn.lock i found the same problem and when i install any package with npm it show me a message 58 vulnerabilities (16 moderate, 40 high, 2 critical)
the images:
https://cdn.discordapp.com/attachments/811324614901760041/905436370363883520/unknown.png
https://cdn.discordapp.com/attachments/811324614901760041/905436302948831312/unknown.png
https://media.discordapp.net/attachments/811324614901760041/905434979037765642/unknown.png?width=1108&height=623
https://cdn.discordapp.com/attachments/811324614901760041/905434979037765642/unknown.png
https://cdn.discordapp.com/attachments/811324614901760041/905433250971926609/unknown.png
To take root of your question, you have both yarn and npm installed.
create-react-app uses yarn for the setup if it's installed. Yarn is a Facebook initiative too, so it's just a preference of react-app creators to lean more to yarn or rather Facebook initiated products and initially it was also believed to be more secure than npm and with a faster performance too.
Glad you have noted --use--npm so you can specify always what you want to use when overriding yarn.
In terms of not using yarn before, don't stress, learn the new tool because Yarn drew inspiration on top of npm, so cli commands are not to far-off.
In terms of the vulnerabilities, let me point to package dependencies. With npm apparently since v6, when starting a new project, this always was a concern. Best thing to do is to audit your packages and find dependencies and resolve or reduce those vulnerabilities by either going to specific versions required or the #latest. It is also worthy to check out your node version, somewhat most devs online say the older versions are more stable and often the vulnerabilities are in react-scripts which are part of the build process. Also, remember that you would be running preset templates so its really worth it to check also npm audits or yarn whys. Also do either an npm outdated or yarn outdated so you can assess properly the state.
Have a great yarn journey!!!
I want to install dependencies with specific version while installing one module.
Let's say I want to install react-virtualized-select module. It has a dependency on react-virtualized module.
So when I run 'npm install react-virtualized-select', It installs latest version(9.11.0) of 'react-virtualized' module. But I want to install specific version (9.9.0) of 'react-virtualized' module.
I tried doing below in package.json
"peerDependencies": {
"react-virtualized-select/react-virtualized": "9.9.0"
},
but shows below message.
+-- react-virtualized#9.11.1
`-- UNMET PEER DEPENDENCY react-virtualized-select/react-virtualized#9.9.0
You can try this way!
Syntax,
npm i packageName#versionNumber
For example,
npm i react-native-vector-icons#6.7.0
run command
npm install --save react-virtualized#9.9.0
Maybe you can share why you want another version of a dependency.
A module controls dependencies through its package.json. It knows which version it depends on and installs that version. Overriding that dependency may give you unwanted results. If you want another version installed, you can add that in your package json.
react-virtualized-select: '^9.11.0',
react-virtualized: '<version>'
Why is it necessary to run 'npm install' when I already have all the dependence in node_module folder.
After running 'npm install' successfully on my machine, I want to setup same project on another machine, why do I require run 'npm install' again when I already have downloaded all the dependence in node_module folder?
First of all I want to inform you 2 things:
As your project depend on some packages (node_modules), same as some packages are dependent on other packages.
when we install some package with command npm install package -g then -g will install it in global folder which can be accessed by any project. by using -g, package is not added to node_modules.
Now here is answer of your problem. There might be possible that some dependencies of packages are installed as global on one machine and not on other one. This can happen as developers work on many project on same machine and might be they have installed global packages. So in this case you need to execute npm install command.
npm install extract all your dependencies from your package.json, download it and save them in your node_modules folder. You don't need to run npm install again and again if you already have installed all your dependencies locally.
When ever you installs a new dependency you run npm install <package-name> --save and why --save for the first time? because it adds the new installed dependency on your package.json. We never push node_modules to our git repo only the updated package.json is pushed to repo. In that case if a new person pulls your code from the repo he is only going to run npm install and all the dependencies mentioned on your package.json will going to available on his project locally. Thats a small intro about why we use package.json hope it helps.
Check the version of node in both system .
I guess that would be issue. you local system would have either higher version than the server. May be not able to compile for higher version make sure the version are same for node in both , to reduce the comflict.
I learned about Yarn and wanted to try it with React so I installed Yarn, and now when I run create-react-app hello, one of the scripts appear to be yarn add v0.24.6, which installs 879 dependencies into my node_modules directory.
Why is this happening and how do I make it stop? Or do I just not understand Yarn and this is supposed to be something I want?
Were you using npm2 before? With it, you'd only see your app's direct dependencies in node_modules and their dependencies (i.e. your app's transitive dependencies) would be tucked away in nested node_modules dirs.
Yarn and npm >= 3 flatten dependencies in node_modules, so you're seeing all of react-scripts' direct dependencies and all of its transitive dependencies.
Every package we use might depends on others packages.
yarn and npm > 3 use flat structure for resolving dependencies of other packages dependencies. So, your node_modules folder container long list of folders.
npm < 3 use nested tree structure. So, your node_modules folder container few list of folders and dependencies of other packages nested inside package/node_modules folders.
so, why use npm > 3 or yarn?
Those are fast for resolving dependencies. I hope you have not yet experience on waiting for 1hours or more after npm install :D.
why yarn over npm?
There are lots of articles written on this topic. Just google it.
This is my first time developing an AngularJS app and using the scaffolding tool Yeoman (http://yeoman.io/). I wanted to use fontawesome for some of my icons (http://fortawesome.github.io/Font-Awesome/) and I know I should use the command
bower install fontawesome
However, I also saw this article (https://www.npmjs.org/package/grunt-font-awesome-vars) that talks about npm grunt install command below
npm install grunt-font-awesome-vars --save-dev
What is the difference there? I'm still a little fuzzy on how the variety of tools work and flow together. Could any Yeoman experts give me a low down when to use bower install, npm install, and the grunt commands so I would know the differences clearly and understand the flow? Thanks.
Grunt is a task automation tool that does very little straight out of the box. It does most of its work through plugging in grunt modules that perform specific tasks.
grunt-font-awesome-vars is a module for grunt (useless without grunt)
bower is a package manager.
npm is a package manager.
(I don't use Yeoman. It's a scaffolding tool for setting up your project structure. I don't agree with its opinions on where things should go, so I don't fool with it. I configure grunt and bower manually)
Quick and dirty:
install node with npm.
Then from your console, (Developer Command Prompt for VS2013, Bash, or whatever you use)
run the following commands
npm install grunt --save
npm install bower --save
npm grunt-font-awesome-vars --save
bower doesn't need grunt. grunt doesn't need bower. grunt doesn't need grunt-font-awesome-vars but grunt-font-awesome-vars needs grunt.
With the way my work flows, I use npm to manage package dependencies that I want to automate with grunt. I use bower to manage the versions of my client dependencies.
More information:
There's a "Yo, Dawg" to describes bower that comes to mind when someone asks the difference between it and npm.
"Yo, Dawg. We heard you really like packages so we installed a
package manager inside your package manager."
Basically, bower is just another package manager. It is installed with npm (which is a separate package manager)
I use npm for managing tooling and server dependencies (like grunt, grunt modules, sass, etc...things I potentially want to be automated) and bower for functional, client specific dependencies (like angular, jquery, etc...things that I potentially want to keep up to date with current version)
Installing through bower will utilize your bower.json. Installing through npm will utilize your package.json.
npm install grunt-font-awesome-vars --save-dev
will install grunt-font-awesome-vars as well as update your package.json with a devDependency(the --save-dev flag does that) so that it is automatically installed any time you perform an
npm install
if you change that command to
npm install grunt-font-awesome-vars -g
it will install grunt-font-awesome-vars to your node install location (indicated by your PATH system variable) and be available to all node instances.
Edit to answer question from comments
Asked: Also, why is there the need to have the install command as 'grunt-font-awesome-vars -g'
grunt-font-awesome-vars is the name of a module for grunt that is deployed as a node package. You install grunt modules with the "npm install" command. -g is a flag that instructs npm to install the requested package to global space, by making it available through your PATH variable. The only things that I currently have installed globally are http-server, bower, and karma. If you don't have packages installed globally, then you will have to have performed an "npm install" of that package at the current working directory in order to execute the commands of that package. For instance, http-server is a node module and is executed command line just like any other console application. In this case, the command "http-server" will start a local http server anywhere you want to serve a site from. If I install it to my PATH, I can run http-server from anywhere I want without having to do anything special. If you don't install it to your PATH, then the http-server executable must be in the directory in which you are wanting to run it. I install it globally so that I never have to "npm install" it again. Most things you will want to package with your project and that you can do with the --save flag rather than the -g (or --global ...they do the same thing) flag.