npm install on laravel - node.js

I try to install a few packages listed on a package.json file, with only these dependencies :
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.0.1",
"jquery": "^3.2.1",
"laravel-mix": "^1.0"
}
but when I run npm install (in the root folder) it install over 1000 packages in a node_modules folder, in the root folder.
I guess I m doing something wrong but I really just start with npm, I read that npm will download all dependencies at once but 1000 ones I ve got some doubt (~ 168 Mo)!
Also as these packages are only for development (except jquery but i will link it directly from a cdn after all) maybe I can install them globally ?
Thx for help
I m using npm version 5.5.1 and Laravel 5.4

Related

The dependency (non-development) of other dependency has not been automatically added to node_modules

I has been told
ESLint couldn't find the plugin "#typescript-eslint/eslint-plugin".
(The package "#typescript-eslint/eslint-plugin" was not found when loaded as a Node module from the directory "D:\XXX\NNN".)
It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
npm install #typescript-eslint/eslint-plugin#latest --save-dev
by ESLint. Why it's strange is the package with ESLint preset has #typescript-eslint/eslint-plugin among dependencies:
{
"name": "#yamato_daiwa/style_guides",
"dependencies": {
"#typescript-eslint/eslint-plugin": "5.19.0",
"#typescript-eslint/parser": "5.19.0",
"eslint": "8.13.0",
"eslint-plugin-node": "11.1.0"
},
"peerDependencies": {
"#typescript-eslint/eslint-plugin": "^5.18.0",
"#typescript-eslint/parser": "^5.18.0",
"eslint": "^8.13.0",
"eslint-plugin-node": "^11.1.0",
"typescript": ">=4.0.0 <4.7.0"
}
}
(I am not sure that peerDependencies are required but I must keep this question focues on one problem)
I expected that all dependencies will be automatically added to node_modules but it has not been (there is no #typescript-eslint among scope directories):
My node version is 16.3.
Update
Looks like #typescript-eslint/eslint-plugin has been added to node_modules below library with ESLint preset. I expected it will be added to directory below node_modules of the project, not below project/node_modules/#yamato-daiwa/style_guides/node_modules.
Do you really need eslint-plugin as a peerDependency in your project?
If so, inspect that you're trying to install the same version of eslint-plugin as the lib that is requiring it.
If not, remove it.
according to documentation: "When a dependency is listed in a package as a peerDependency, it is not automatically installed. Instead, the code that includes the package must include it as its dependency.
npm will warn you if you run npm install and it does not find this dependency."
https://flaviocopes.com/npm-peer-dependencies/
If all else fails, try running "npm ci" (clean install) rather than npm install.

Is is possible to install dependancies with single line command?

My Node.js
package.json
has following dependancies
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.16.4",
"mongoose": "^5.3.10",
"nodemon": "^1.18.5"
},
"devDependencies": {
"eslint": "^5.8.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.14.0"
},
I am new to JS,so I want to know if we can somehow invoke package.json without going for
npm install
for every package.
When you use the command npm install or npm i, it will install all dependencies from your package.json.
As a result you get all the dependencies listed in the package.json from the current folder
You can see the documentation concerning this command here : npm install
Welcome to JS world, I'm fairly new to JS myself but I believe there two possible solutions to your problem:
npm install multiple dependencies
It is possible to install multiple dependencies at the same time with one npm install command, you may find more information that could be helpful in the documentation.
For example:
npm install got koa fs-extra
Here I have installed all 3 of my project dependencies at once.
Pre Populate package.json
You can manually add the package dependencies in the correct format to your package.json file. You might the npm documentation on the package.json file helpful.
You then will need to run:
npm install
This will take the dependencies in the package.json file and install them into the node_modules/ directory.

Adding SASS to React Project Stalls Yarn Start

I'm mid-way though a React project and am now adding styles and implementing SASS, and the other day while I added the packages and some styles, everything was running great. Today I go to boot it up with Yarn Start and and I'm getting:
npm WARN lifecycle The node binary used for scripts is /var/folders/hd/zrndmrss6z3cbm68fxxyt4wm0000gn/T/yarn--1553472972241-0.9303472274627695/node but npm is using /Users/kevinhyde/.nvm/versions/node/v11.10.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
> test-again#0.1.0 css-watch /Users/kevinhyde/Desktop/CAREER/UW Code Camp/Post_Grad_Apps/test-again
> npm run css-build -- --watch
npm WARN lifecycle The node binary used for scripts is /var/folders/hd/zrndmrss6z3cbm68fxxyt4wm0000gn/T/yarn--1553472972241-0.9303472274627695/node but npm is using /Users/kevinhyde/.nvm/versions/node/v11.10.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
> test-again#0.1.0 css-build /Users/kevinhyde/Desktop/CAREER/UW Code Camp/Post_Grad_Apps/test-again
> node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css "--watch"
I have just following packages:
"dependencies": {
"axios": "^0.18.0",
"bulma": "^0.7.4",
"bulma-extensions": "^6.2.0",
"dotenv": "^6.2.0",
"node-sass": "^4.11.0",
"react": "^16.8.3",
"react-bulma-components": "^2.3.0",
"react-dom": "^16.8.3",
"react-scripts": "2.1.5"
},
So far I have tried node re-installs on the related packages and straight up npm i, as well as npm audit to try to fix, but when I jumped back to the previous branch before adding node-sass, all's well. Any ideas?

Deciding whether to save to devDependencies or dependencies?

I'm building a react/express app and want to make sure I'm setting up my package.json so that dev packages go under devDependencies, and production packages go under dependencies.
When downloading a new npm package, what's the quickest way to find out whether I can save it using --save or using --save-dev? For example, here is my current package.json:
"devDependencies": {
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.2",
"eslint": "^4.6.0",
"eslint-plugin-react": "^7.3.0",
"jest": "^20.0.4"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"ejs": "^2.5.7",
"express": "^4.15.4",
"pm2": "^2.6.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.5.5"
}
I had a hard time looking up which section each package should go on. I tried looking it up for each individual dependency but never got a really decisive answer so I don't know if I did so optimally.
What's the best way when downloading an npm package to find whether I can save it using --save-dev?
Generally, dependencies (--save) are for packages that are referenced by your application code: code that runs when someone uses your app. devDependencies (--save-dev) are for packages used by the developers of your app: compilation/build tooling and testing.
There is no strict restriction in npm or node that says package x must go into dependencies or devDependencies. You could install webpack in either but if we follow the logic above, the most appropriate section for it is devDependencies.
When you publish your package to npm, a user doing an npm install for your package can choose to install, along with your package's code, dependencies (the usual), devDependencies, or both. If they're not going to be modifying code in your package, they won't need anything from devDependencies. This is one reason to keep the two sections cleanly separated.
This is what I do. I'm curious to know if there is a better way:
Look up your package on the npmjs.com site and see how they recommend installing it.
If they recommend installing it with --save (or simple without any --save option), it belongs in dependencies.
If they recommend installing it with --save-dev (or --dev or -D), it usually belongs in devDependencies.
E.g.:
https://www.npmjs.com/package/#babel/runtime
npm install --save #babel/runtime
put it into dependencies
https://www.npmjs.com/package/#babel/core
npm install --save-dev #babel/core
put it into devDependencies
Exceptions:
I've noticed that this method is not always reliable. E.g. resize-observer-polyfill which recommends installing it with --save-dev but the project I'm working on uses it in production. Then again, if you're using webpack, it might bundle it in for you anyway :).

Gulp build does not install dependencies automatically?

I use gulp to build my javascript application. I have some dependencies declared in the package.json file, for example:
"dependencies": {
"flux": "^2.0.1",
"keymirror": "~0.1.0",
"object-assign": "^1.0.0",
"react": "^0.13.1",
"dropzone": "^4.0.1",
"lodash": "^3.6.0"
}
When I run gulp build, it always prompt me some dependency cannot be found unless I manually run npm install lodash for example.
Is there a way to have gulp run npm install automatically?
Run npm install --save-dev command to resolve all dependencies.
Here is link to documentation with --save-dev parameter description: https://docs.npmjs.com/cli/install
You require to have package.json on the root level.
Then once you have to run npm install for all the dependencies with --saveDev(development dependencies) or --save(project level dependencies).
Once this is done, for the next time only run npm install command will install dependent dependencies.
gulp-install would help for your issue. Go to NPM (node package manager) and search for "gulp-install".
The node plugin gulp-install automatically installs packages/dependencies for npm, bower, tsd, and pip. The relative configurations must be found in the gulp file stream.
Example Usage:
In your gulpfile.js:
var install = require("gulp-install");
gulp.src(["./package.json", "./bower.json"])
.pipe(install());

Resources