Visual Studio 2017 not restoring packages on save - npm

IN VS2017 I have a quick node.js "Hello world" project. The installed template for node.js includes using NPM via an included package.json I am editing the package.json file to include new dependencies. Upon saving package.json VS is supposed to install any new packages that are included.
I started with the project template: Other Languages\TypeScript\Node.js
I confirmed that the option is enabled for Restoring npm packages on save of package.json
But no matter what changes I make to package.json VS won't run npm and install the missing packages. Also if I build or run VS won't automatically install the missing packages. I can right click on npm and select Install Missing Packages which does work.
What am I missing?

Restore on Save for NPM packages currently doesn't work in NPM projects. I'm still tracking down the root issue, but I did come across a discussion where they (the NTVS folks) wanted to opt out of some behaviors for Web projects.
There are some context menu options on the npm or individual package nodes to restore/update/etc. You could also create new keyboard shortcuts for these context menu items, but I don't know of a way to make Ctrl+S work.
I'm following up internally to revisit these decisions, but in the meantime, send in feedback so that we have some customer data to point to!

Related

How do I properly create a new package in lerna monorepo?

I inherited a monorepo with a packages folder that has every existing package. I want to add a main package that is required by my panel package. panel already exists at version 0.34.0. Seeing as I merge to my repo without publishing a new version all the time, I want to create main at 0.34.0.
I tried going into packages/main but doing npx lerna publish only wants me to do 0.34.1 so I am worried if I try to do custom 0.34.0 I will break something. I tried npx lerna boostrap but it even says it goes to root doesn't ask for me to do anything in regards to brand new package in existing project.
Do I need to create the package and bump my whole monorepo to 0.34.1 via publish to then let any existing package use it?
I use symlinks locally, but when I go to make a PR, my CI will run yarn install which (I don't think) would find the packages when reviewing the package.jsons. Therefore, I don't think Using Lerna with unpublished packages applies here? I think I need to actually publish a version that can be referenced?
Going into the new main folder and typing npm publish - and just skipping lerna, is what worked. Found that out here: https://github.com/lerna/lerna/issues/1691.
Everything went where I expected and then I could just manually update package.json files as needed that are using the new package.

How does the NPM cache and node_modules folder work hand in hand?

I am trying to demystify this NPM behavior. I have a custom library which I create for an Angular Project. The library is copied directly to the Node modules directory in my Angular Folder to test any new functionalities that I add on whatever project is using it. However, I notice the older version of the library is being used by the project.
I wonder whether this is due to the NPM Cache.
So my question is, how does the NPM cache and Node_Modules folder work hand in hand?
I can't directly answer as to how the cache relates to node_modules, but I can say that your package-lock.json file is likely the culprit behind your outdated packages. Try running npm update. If that doesn't work, try deleting your package-lock.json file and running npm install.
If that also doesn't work, make sure you have the correct version specified for your library in your project's package.json file. latest will grab the latest release available, ^1.0.0 will grab the latest minor and patch releases, ~1.0.0 will grab only the latest patch releases, and 1.0.0 will only grab that exact version.

Do I really need to put anything in "dependencies"?

I'm developing a browser-side package, with several runtime dependencies and developing tools. As suggested, I install them using NPM as dependencies and devDependencies respectively.
Eventually, before I publish it, I always compile every source file and external dependencies into one minimized file.
When I try to install it in another project, however, I noticed that all "dependencies" packages are also installed. I assume it's a standard NPM behavior, yet these packages should not be needed, as I've already compressed them all into my own .min.js file.
Should I just move them all to "devDependencies"?

Way to Hot Reload a local Vue Plugin within a local Vue Application?

Is there a way for Hot Reloading to occur on a local npm dependency of a local Vuetify application using yarn serve (which is probably using webpack / vuetify-loader)?
BUSINESS CASE
We have some common Vuetify components that I'd like to expose with a "common-components" Vue Plugin and allow all of our Vuetify applications to pull those common components. I'm able to do so by packaging the plugin and creating the dependency and pushing to a private npm repo or a commit/push to a private git repo. The problem lies with the development cycle and development experience.
A typical development change to the Plugin within the local development environment requires:
(common-components) yarn build (to create the dist/common-components.umd.js)
(common-components) (deploy to a private npm rep or a commit/push to a git repo)
(application A) yarn upgrade common-components to pull the latest
(application A) yarn serve
There has to be a better development cycle than this, right? Or is my real problem that we need to decouple the plugin from our applications better?
THE SOLUTION I WAS HOPING FOR, BUT FAILED
yarn-link or npm-link
I was able to get this to work, but a NPM dependency still resolves to the folder's package.json which has a "main": "dist/common-components.umd.js". This requires me to do a yarn build which removes the file and rebuilds it. When the file is removed, "application A" that is currently running with yarn serve breaks and is unrecoverable. I must shut down the server and do a yarn serve again.
I'm hoping there is a solution out there that tackles this scenario!
I've done that kind of setup a while ago thanks to yalc.
It was essentially:
work on your own package, setup it (with yalc link if I remember properly)
when an update was done on the package, we had it to automatically yalc publish --push --changed like with a linter
you can use a pre-push git hook to babelify your package
on the host main app, we had a nodemon running to check if yalc published any changes, and if it was the case, simply reload the app
on main app still, we used a git hook on pull to have it fetching the latest changes on the yalc.lock store (with yalc update)
I did it a while ago so I don't remember it super well but it was working pretty well as far as I remember, just need to run 2 servers (one on the package to publish and one on your main app to fetch the changes) on top of your other services. Still works better than it's yarn or npm links.

npm/bower - Basic questions(Why it requires for just AngularJS then?)

I read about npm and bower, differences, usage, how it works, purpose as well. All explanation says that to work in NodeJs. But when I searched for AngularJS2, the tutorial says use npm. I have some basic questions based upon the understanding that npm basically for dependency management or packages to be installed.
How my Java/Eclipse workspace knows that npm installed the particular JS library/file, what path should be given in the html/web page for including those files/libraries?
If I move the web application to production, how will the server gets those dependent libraries? Even if server gets it, it might be installed in different folder. Basically how it can be managed with a web applications in different environments for just AngularJS app?
Can anyone please help me to have better understanding?
Finally found the answer. NPM is node package manager which helps basically to download the dependencies (almost like maven, gradle in java).
npm software needs to be installed in developer's machine.
Add the required dependencies in the package.json in the root folder of AngularJS application.
Open the DOS command line and navigate to project root folder(workspace/project in eclipse), then type npm install which will download all the dependencies mentioned in the package.json to a folder called npm_modules inside project folder.
The other and important advantage is npm can be used to install browser agent as well. So npm start command will open the browser and will load the application automatically in browser. Developer does not need to be aware about NodeJs. One more benefit of using this approach is the browser will get refreshed automatically when any update in the JS file gets saved.