dependencies vs devDependencies
Have you ever asked yourself what is the difference between these two types of dependencies inside your package.json? In this article I will try to answer this question using simple words.
What are dependecies and what they are used for?
If you are not developer from a 2007, and you are installing frameworks and libs using package managers you should be using dependecies even if you didn’t know about them. Imagine that you have created fabulous website using Vue and have installed it with npm. And you may want other people to see what an amazing developer you are and you have pushed your project to a github repo, and of course you have added your node_modules to a .gitignore file, because you are clever developer. Then other people copy your project on their machines and try to run it on a localhost, but oopppss, nothing works… These all happens because of used Vue, which was installed inside our node_modules you haven’t pushed. The only one solution of this problem is to simply run npm install script inside your project folder
And this is when package.json enters the game. This command will goes into your package.json and install all frameworks and libs mentioned in your dependencies. For example in my case, Vue and Vue-material will be installed + needed packages for a stable work of npm
How dependencies appear inside your package.json?
When you are installing some lib using npm, all needed info automatically add to a dependencies. For instance, let’s install Vuex using npm install vuex --save
Vuex and all additional necessary packages have been added to your dependencies successfully.
dependencies vs devDependencies
And now it’s time to answer the main question of this article, what is the difference between these two types of dependencies?
devDependencies should contain packages which are used during development or which are used to build your bundle, for example, mocha, jscs, grunt-contrib-watch, gulp-jade and etc. These packages are neseccery only while you are developing your project, also ESlint is used to check everything during building your bundle. So install all these packages using -dev flag, this will say to the npm, heeey, I need these package for development, so this will automatically add package to devDependencies instead of usual dependencies.
By the way, npm install by default installing packages from both dependencies and devDependencies. I haven't seen usage of this flag for years, but I will just let you know this, for small projects this may work npm install --production , --production flag says to the npm, heey, I want you to install packages only from usual dependencies.
Dependencies should contain libs and framewors your app is built on, such as Vue, React, Angular, Express, JQuery and etc. You will agree with me, if I say, that your project wont work without these packages(if you are using them, of course).
Conclusion
Summing up, use -dev flag, if you are installing packages you will use during development, and do not if package you are installing is for production.
Thank you for reading my article, clap for this story to help me grow my medium profile, read my other articles about programming:
