Install webpack to separate dependencies? - javascript

Im going through a tutorial on webpack (third day and still confused as anything!) and Im combing through the commands:
npm i webpack --save-dev
The above command installs the webpack as a node module to '--save-dev'? Im confused what '--save-dev' is. And is it a normal convention for webpacks to use?
Also where is this dependency being saved? I dont find any reference to it in webpack.config.js or package.json for that matter?
Many thanks

npm i webpack --save-dev is a shorthand for npm install webpack --save-dev. The --save-dev flag tells npm to save the dependency as a development dependency, i.e. it will be listed in devDependencies in package.json instead of the "normal" dependencies section.
What this means is that development dependencies are dependencies that are not required to run your application, but only for development purposes like running unit tests, bundling the application, etc. etc.
From the documentation for npm install:
-D, --save-dev: Package will appear in your devDependencies.
Here is another stackoverflow post on differences between "normal" dependencies and development dependencies.
Cheers, Alex

Related

Automatically updating dependencies in package.json

I have one question I think is pretty simple. Could you explain me why sometimes package.json is automatically updates and sometimes don't. e.g. if I installed express or gulp these plugins were added to dependencies automatically. But if I installed express-jwt or mongodb these plugins were not added
They are added to package.json when you append one of the following flags:
-S|--save|-D|--save-dev|-O|--save-optional
See https://docs.npmjs.com/cli/install for full documentation.
If we use the following command to install npm dependencies-
npm install express-jwt --save
or
npm install mongodb --save
these installed dependencies will also be added to package.json file.
When you install a package with the --save or --save-dev flag, these are persisted to the dependencies or devDependencies arrays respectively.
If no flag is added, the package is downloaded but not persisted to package.json
Edit: There's is also the more obscure --save-optional flag, but it'd say it's mostly out of scope for this particular case.

How to install multiple gulp packages at once using node?

I just switched to gulp task runner to automate my workflow, but there is this problem whenever i want to start a new project i have to install all packages required in gulpfile.js using the following command:
npm install --save-dev {package name}
Imagine there are 20 of them, it's a bit boring. How can simplify this?
You can add multiple package names to npm install:
npm install --save-dev package1 package2 package3
npm will install and save the specified packages in your package.json.
Personally I use mostly the same gulp plugins for all of my projects. I copy the devDependencies bit from the package.json of one of my previous projects into my newly created package.json, then I run npm i which installs all dependencies listed in package.json. It's a huge timesaver, especially since I usually copy my gulpfile.js as well.
Note: don't forget to run npm outdated if it's been a while since your previous project started, to check if any of the dependencies have been updated in the meantime.
You can also use brace expansion for installing many similarly named packages:
npm i -D babel-{core,preset-es2015,preset-react}

Difference between npm install --save and npm install --save-dev

Guys I know that using npm install -g we can install the node modules/packages globally, but I am not sure about the options --save and --save-dev
I have Googled it but still not clear about it. Please share your thoughts.
--save adds the third-party package to the package's dependencies. It will be installed together with the package whenever someone runs npm install yourPackage.
--save-dev adds the third-party package to the package's development dependencies. It won't be installed when someone installs your package. It's typically only installed if someone clones your source repository and runs npm install in it.
Dev dependencies, as the same suggests, are those dependencies that are only needed for developing the package. That can include test runners, compilers, packagers, etc.
Both types of dependencies are stored in the package's package.json file. --save adds to dependencies, --save-dev adds to devDependencies. From the documentation:
devDependencies
If someone is planning on downloading and using your module in their program, then they probably don't want or need to download and build the external test or documentation framework that you use.
In this case, it's best to map these additional items in a devDependencies object.
These things will be installed when doing npm link or npm install from the root of a package, and can be managed like any other npm configuration param. See npm-config(7) for more on the topic.
For build steps that are not platform-specific, such as compiling CoffeeScript or other languages to JavaScript, use the prepublish script to do this, and make the required package a devDependency.
Edit: As of npm 5.0.0 the installed modules are added as a dependency by default, so the --save option is no longer needed.
--save-dev is used to save the package for development purpose. Example: unit tests, minification.
--save is used to save the package required for the application to run.
--save-dev will save npm modules in development dependencies in package.json i.e it will save inside devDependencies object.
--save will save npm modules dependencies in package.json i.e it will save inside dependencies object.

Is there a minimal version of "npm install grunt"?

When I run npm install grunt I get, in my opinion, a heavily polluted project folder. In the folder node_modules there are libs like rimraf, coffescript and others I really don't want to use. Are these required for grunt itself to be able to run or are they only there for my convenience?
I would like some kind of "npm install grunt --minimal" to only install an absolute minimum of what's needed to be able to use grunt. I don't really like my project folder full of stuff that's not really my own code. I've googled the terms i can come up with, like "minimal grunt install", but only found the basic install tutorials.
Create a node_modules directory in a directory above your project's directory and do npm install grunt there. That way the modules are accessible but they aren't in your project's node_modules directory.
Another option is to use npm install -g grunt to install grunt globally.
No, you can not. Grunt is npm package and it has dependencies (this is normal). The fact is this dependencies don't pollute your project folder structure. It is normal to
add node_modules to .gitignore and don't commit it
install every npm package with --save flag (will write package to package.json) or --save-dev flag (will write package to package.json as package needed for development)
commit package.json to repository. Thus, every team member can install all packages via npm install or npm install --production
As Dan said you can install grunt globally with -g flag but this will not solve your problem as every npm package that you install will have it own dependencies (and you'll probably think that it pollutes you folder structure as well)
You know, there are a lot of things that you need for development (or production). While installing apache (or something else) you don't say that is pollutes your file system (but it has own folder and so on).
Things don't pollute file structure if they don't exist in your project repository.
use pnpm
pnpm creates the "deep" node_modules that you want
also saves disk space and network traffic : )
alternative: npm install --legacy-bundling
to produce a deep node_modules

What the difference between install a module with npm node console or in package.json

I'm new and I need to use node for off-line use so, I'm trying to understand how the install modules work.
It's the same if I use npm install express or included it in the package.json?
The way a package is installed will be the same whether you manually type npm install express or put it in your package.json and then do npm install. The difference comes when you try to install your Node project elsewhere.
For example, if your code was checked into GitHub and you didn't include a package.json with all of the dependencies listed, then when the project was downloaded you would have to manually re-install all of the dependencies on the command line in order for it to work. But if you had checked in a package.json with the code, then you could run npm install to install all of the dependencies at once, and not have to remember which ones were necessary.
In addition, the package.json allows you to specify an "approximate version" of a dependency to use. This way if a few packages in your project share a dependency and they all specify similar "approximate versions", only one version will be installed and it will be shared between packages. This saves some install time.
Nothing actually. But you don't want to do that again and again. So you might as well put your module dependencies in your package.json

Categories

Resources