ng cli new command : use node_modules from parent directory - node-modules

Is there a way to skip downloading node_modules all over again and use the node_modules in the parent directory when using ng new command? This will expedite the new project template generation over slow internet connections.

Yes there is an option to skip install the npm packages by using ng new myProject --skip-install.

Related

How can we manage the front-end projects dependency packages like Maven in IDEA

There are more and more front-end projects, and each project has its own node_modules folder.
There are a lot of duplicate files in the modules folder.
How can we manage the dependency packages of all front-end projects in one folder like Maven in IDEA?
Demand:
When running and packaging different projects, WebStorm can refer to the dependent packages in a specified folder.
When run npm install, computer will check whether the public dependency package folder has the dependency version that the current project needs to use.
If so, you will not download the installation.
If not, you will download your own dependency to the public folder.
When multiple versions exist in the same dependent package, the project can automatically reference the correct version.
Maybe after reading my question, you know my actual needs better than I do. Thank you.
If you look in the package.json file in any front-end project with npm you will see all the dependencies in the current project and can manage the versions there. npm install installs the dependencies listed in that file.
Read more about package.json here: package.json
Using the yarn workspace
Yarn workspace features, and solves
multiple projects repeat node in large quantities_ Black hole problem of modules disk
when NPM install is executed for a project, all dependent packages will be placed in the node of the project in the current project_ Install it again under the modules folder
2.1 when installing a new dependency package, you should update the package.json of the subproject, and then execute the yarn install in the root directory to install it
Install the yarn tool first
npm i yarn -g
If there are projects project-a and project-b in the root folder, the directory structure is as follows:
root
project-a
project-b
create package.json in the root folder, with the following contents:
{
"private": true,
"workspaces": ["project-a", "project-b"]
}
ensure that the name attribute values in the package.json of project-a and project-b projects are:
Package.json in project-a:
{
...
"name": "project-a"
...
}
Package.json in project-b:
{
...
"name": "project-b"
...
}
use the command line tool to enter the root folder and execute the yarn install
3.1 after installation, you can enter the normal start-up project
tips:
4.1 all dependent packages will be installed at root/node_ Under modules folder
4.2 node of subproject_ The related link file will be generated under the modules folder, do not delete it
4.3 when installing a new dependency package, you should update the package.json of the subproject, and then execute the yarn install in the root directory to install it

How do I install vuetify directly from github?

When I try with
npm install vuetifyjs/vuetify#v1.5.2
I get "Cannot find package".
UPDATE:
There is a packages folder under which there is a vuetify directory.
I tried npm installing that folder. Everything appeared to go well until I started the dev server.
Now in the console log I see:
[Vuetify] Multiple instances of Vue detected
Seems to be related to https://github.com/vuetifyjs/vuetify/issues/4068 but I cannot tell what the solution is at this point.
I had the same issue to use my own version of Vuetify, waiting for my pull request being accepted.
Here what I did:
I build the vuetify project with my fix.
yarn
yarn build
Then I took the content of 'packages/vuetify' and put it in a new git repository. I remove the .gitignore to be able to commit built files (/es5, /lib, /lib-temp, /dist)
Finally I add this git repository to my project to replace my vuetify version:
npm install git+https://gitlab.com/GITLABUSERNAME/REPOSITORYNAME.git
Looking at the package.json file, the package doesn't have a name property, which it would need to have for you to be able to install it from GitHub.
So the short answer is that you can't install vuetify directly from GitHub via npm.
However, you can install it directly from npm:
npm install vuetify#1.5.2
You can't install vuetify directly from GitHub but you can edit code in 1 component node_modules/vuetify/lib/components/VSlider/VSlider.js Then, you install patch-package and execute path package vuetify Delete node modules and execute yarn to create new node modules Last, yarn serve, you see your code is work
https://www.npmjs.com/package/patch-package

How do I make changes to the v-slider component and test it in my app?

I tried editing inside node_modules but the files are taken from dist and src seems to be ignored.
I tried npm run build to see if I can push my changes to dist but that doesn't work either as other dependencies seem to be missing.
UPDATE:
I followed the instructions about set up dev env in the Contributing section of the docs.
Made the changes and did yarn and yarn build
But the dist folder is identical to the one without my changes
What gives?
Instructions in the set up dev env in the Contributing section work.
After running "yarn build" in the cloned repository folder, you can copy the contents of the dist folder under packages/vuetify to the dist folder under node_modules/vuetify of the app being developed and your changes can be tested.
You can also do npm run build inside packages/vuetify for subsequent changes.
You can edit code in node_modules/vuetify/lib/components/VSlider/VSlider.js
Then, you install patch-package and execute path package vuetify
Delete node modules and execute yarn to create new node modules
Last, yarn serve, you see your code is work
https://www.npmjs.com/package/patch-package

NPM run build not working in Windows specific directory

I am working on a Front End project in Javascript (NPM, Webpack and Babel). I work on Mac all the time but I am having some issues when cloning the project in my PC Windows 10 machine.
It is building properly if I put the project in any directory but when I put the project in the directory where it should be located, Babel doesn't compile the project as expected.
The reason the project should be located there is because I am integrating it with some other tools (Bamboo - Continuous Integration).
npm run build
My builds script is:
"build": npm run clean && cross-env NODE_ENV=production webpack --env.prod=true
ERROR in ./index.js
Module parse failed: C:\opt\bamboo-home\xml-data\build-dir\STA-DEV-
JOB1\node_modules\babel-loader\lib\index.js!C:\opt\bamboo-home\xml-
data\build-dir\STA-DEV-JOB1\src\index.js Unexpected token (24:8)
You may need an appropriate loader to handle this file type.
| const render = (Component, target) => {
| ReactDOM.render(
| <Provider store={store}>
| <AppContainer>
| <Component/>
Does nodeJS or NPM or Webpack or Babel need specific permission over the directories they work on ?
Any help would be appreciated. I am lossing hair here.
Am glad you are using window 10. Use the bash shell on windows 10 to run the command npm run build.
follow this link to learn how you can cd to the directory from the bash shell
I had the same problem, then i found that i need shell bash, so follow the bellow steps:
install Git
go to project folder and right click to access context menu
from there run Git bash here
run the command: npm run build / yarn build
mine working perfectly with this solution.

Removing node_modules directory in my project

What is the right way of removing the entire node_modules directory. Do i have to delete it right away
Ultimately you will need the modules for the application to work (if they are not development dependencies)...
If you want to erase modules you installed for development and not required in production then you can use npm prune.
Also, if you're using git you can add /node_modules to the .gitignore file, so you aren't saving libraries to your repo, and then later you can install dependencies by running npm install.
i lost count on how many times i deleted node_modules just by pressing delete button. Had no problem so far, as long as you don't forget to
npm install
everytime you delete node_modules to install dependency that is required by your app.
Best way which i found,in root of app from cmd rmdir /S node_modules and thats it.
you can use rm -rf /node_modules to remove this from project

Resources