Npm In Visual Studio



  1. Run Npm In Visual Studio 2017
  2. Visual Studio Npm Command
  3. Npm In Visual Studio 2019
-->
  • Search results for 'npm', Visual Studio Code on marketplace.visualstudio.com.
  • For the uninitiated, installing Visual Studio is a big process. Prepare at least an hour of time! It’s a huge tool but very worth it. Install Node.js. Download and install Node.js; Install Node Tools for Visual Studio. Download Node Tools for Visual Studio; Install NPM support for Visual Studio. Start Visual Studio; Tools - Extensions and Updates; Search for npm; Select and install the NPM Scripts Task Runner; Restart Visual Studio.
  • Getting Started with npm in Visual Studio Good Old Command Line. As much as Visual Studio developers love having a UI for their tools, npm is still most easily. The npm Command Line Basics. So you know how to get to the command line quickly from Visual Studio, now what?
  • Node.js Tools for Visual Studio is a free and open source Visual Studio extension supported by Microsoft and the community. We are constantly working to improve the Node.js experience in Visual Studio, and look forward to hearing any feedback or ideas you have (especially those that come in the form of pull requests). Visual Studio Community 2019.

npm allows you to install and manage packages for use in your Node.js applications. Visual Studio makes it easy to interact with npm and issue npm commands through the UI or directly. If you're unfamiliar with npm and want to learn more, go to the npm documentation.

Visual Studio integration with npm is different depending on your project type.

Important

Go to command line at your SOLUTION directory and execute the following command: 1. You may also use the Visual Studio Package Manager Console: Visual Studio - Tools – NuGet Package Manager - Package Manager Console. The final result will be the following: A nodemodules PER SOLUTION, like NuGet.

npm expects the node_modules folder and package.json in the project root. If your app's folder structure is different, you should modify your folder structure if you want to manage npm packages using Visual Studio.

Node.js projects

For Node.js projects, you can perform the following tasks:

These features work together and synchronize with the project system and the package.json file in the project.

Prerequisites

You need the Node.js development workload and the Node.js runtime installed to add npm support to your project. For detailed steps, see Create a Node.js project.

Note

For existing Node.js projects, use the From existing Node.js code solution template or the Open folder (Node.js) project type to enable npm in your project.

Install packages from Solution Explorer (Node.js)

For Node.js projects, the easiest way to install npm packages is through the npm package installation window. To access this window, right-click the npm node in the project and select Install New npm Packages.

In this window you can search for a package, specify options, and install.

  • Dependency type - Chose between Standard, Development, and Optional packages. Standard specifies that the package is a runtime dependency, whereas Development specifies that the package is only required during development.
  • Add to package.json - Recommended. This configurable option is deprecated.
  • Selected version - Select the version of the package you want to install.
  • Other npm arguments - Specify other standard npm arguments. For example, you can enter a version value such as @~0.8 to install a specific version that is not available in the versions list.

You can see the progress of the installation in the npm output in the Output window. This may take some time.

Tip

You can search for scoped packages by prepending the search query with the scope you're interested in, for example, type @types/mocha to look for TypeScript definition files for mocha. Also, when installing type definitions for TypeScript, you can specify the TypeScript version you're targeting by adding @ts2.6 in the npm argument field.

Manage installed packages in Solution Explorer (Node.js)

npm packages are shown in Solution Explorer. The entries under the npm node mimic the dependencies in the package.json file.

Package status

  • - Installed and listed in package.json
  • - Installed, but not explicitlylisted in package.json
  • - Not installed, but listed in package.json

Right-click the npm node to take one of the following actions:

  • Install New npm Packages Opens the UI to install new packages.
  • Install npm Packages Runs the npm install command to install all packages listed in package.json. (Runs npm install.)
  • Update npm Packages Updates packages to the latest versions, according to the semantic versioning (SemVer) range specified in package.json. (Runs npm update --save.). SemVer ranges are typically specified using '~' or '^'. For more information, package.json configuration.

Right-click a package node to take one of the following actions:

  • Install npm Package(s) Runs the npm install command to install the package version listed in package.json. (Runs npm install.)
  • Update npm Package(s) Updates the package to the latest version, according to the SemVer range specified in package.json. (Run npm update --save.) SemVer ranges are typically specified using '~' or '^'.
  • Uninstall npm Package(s) Uninstalls the package and removes it from package.json (Runs npm uninstall --save.)

Right-click a package node or the npm node to take one of the following actions:

  • Install missing packages that are listed in package.json
  • Update npm packages to the latest version
  • Uninstall a package and remove from package.json

Note Current affairs.com.

For help resolving issues with npm packages, see Troubleshooting.

Use the .npm command in the Node.js Interactive Window (Node.js)

You can also use the .npm command in the Node.js Interactive Window to executenpm commands. To open the window, right-click the project in Solution Explorer and choose Open Node.js Interactive Window.

In the window, you can use commands such as the following to install a package:

.npm install azure@4.2.3

Tip

By default, npm will execute in your project's home directory. If you have multiple projectsin your solution specify the name or the path of the project in brackets..npm [MyProjectNameOrPath] install azure@4.2.3

Tip

If your project doesn't contain a package.json file, use .npm init -y to create a new package.json filewith default entries.

ASP.NET Core projects

For projects such as ASP.NET Core projects, you can integrate npm support in your project and use npm to install packages.

Note

For ASP.NET Core projects, you can also use Library Manager or yarn instead of npm to install client-side JavaScript and CSS files.

Add npm support to a project (ASP.NET Core)

If your project does not already include a package.json file, you can add one to enable npm support by adding a package.json file to the project.

  1. If you don't have Node.js installed, we recommend you install the LTS version from the Node.js website for best compatibility with outside frameworks and libraries.

    npm requires Node.js.

  2. To add the package.json file, right-click the project in Solution Explorer and choose Add > New Item. Choose the npm Configuration File, use the default name, and click Add.

    If you don't see the npm Configuration File listed, Node.js development tools are not installed. You can use the Visual Studio Installer to add the Node.js development workload. Then repeat the previous step.

  3. Include one or more npm packages in the dependencies or devDependencies section of package.json. For example, you might add the following to the file:

When you save the file, Visual Studio adds the package under the Dependencies / npm node in Solution Explorer. If you don't see the node, right-click package.json and choose Restore Packages. Idm crack and patch download.

Note

In some scenarios, Solution Explorer may not show the correct status for installed npm packages. For more information, see Troubleshooting.

Install packages using package.json (ASP.NET Core)

For projects with npm included, you can configure npm packages using package.json. Right-click the npm node in Solution Explorer and choose Open package.json.

IntelliSense in package.json helps you select a particular version of an npm package.

When you save the file, Visual Studio adds the package under the Dependencies / npm node in Solution Explorer. If you don't see the node, right-click package.json and choose Restore Packages.

It may take several minutes to install a package. Check progress on package installation by switching to npm output in the Output window.

Troubleshooting npm packages

  • npm requires Node.js If you don't have Node.js installed, we recommend you install the LTS version from the Node.js website for best compatibility with outside frameworks and libraries.

  • For Node.js projects, you must have the Node.js development workload installed for npm support.

  • In some scenarios, Solution Explorer may not show the correct status for installed npm packages due to a known issue described here. For example, the package may appear as not installed when it is installed. In most cases, you can update Solution Explorer by deleting package.json, restarting Visual Studio, and re-adding the package.json file as described earlier in this article. Or, when installing packages, you can use the npm Output window to verify installation status.

  • In some ASP.NET Core scenarios, the npm node in Solution Explorer may not be visible after your build the project. To make the node visible again, right-click the project node and choose Unload Project. Then right-click the project node and choose Reload Project.

  • If you see any errors when building your app or transpiling TypeScript code, check for npm package incompatibilities as a potential source of errors. To help identify errors, check the npm Output window when installing the packages, as described previously in this article. For example, if one or more npm package versions has been deprecated and results in an error, you may need to install a more recent version to fix errors. For information on using package.json to control npm package versions, see package.json configuration.

What is the problem ?

Studio

.NET developers usually use NuGet as a Packet Manager.
Despite being able to deal with JavaScript packages, NuGet is not the best option for them.
So, a long time ago, Microsoft implemented native Bower support in Visual Studio, but Bower was deprecated in 2018:

So, some time ago, Microsoft created the LibPack to replace Bower in Visual Studio:

But there is a much better solution than Bower ou LibMan: npm.
npm is the Package Manager for Node.js and you, probably, will find there any JavaScript library you want.

Visual Studio has native support to npm, but I do not like the way it works.
So I changed it a little…

How does npm work ?

npm manages and downloads JavaScript packages, very close to the way NuGet does with .NET Packages.
Below you find a naive comparison of both:

npmNuGet
SitenpmNuGet
Filepackage.json
package-lock.json		packages.json
PackagesJavaScript.NET
JavaScript

The first npm goal is supporting Node.js: the well known JavaScript Server.
npm is a command-line tool and ( like Git ) you will feel better using it this way.

How does Visual Studio deal with NuGet ?

The NuGet packages are managed by Nuget Package manager both visually and by Package Manager Console.
NuGet keeps a CACHE with all downloaded packages ( since ever ! ) in the following directory:

You may change the location of this CACHE with the following command:

Below you find the project structure created for an ASP.NET Mvc Project with NuGet:

As you can see, the packages are download BY SOLUTION and NuGet automatically manages multiple versions.

Run Npm In Visual Studio 2017

Below you find the project structure created for an ASP.NET Core Mvc Project with NuGet:

As you can see, there are no packages directory and package.json file.
This is because all packages are kept in CACHE directory ( see above ) and Projects reference them in a different way.

HINT
I EXCLUDE packages directory ( and node_modules ) from Git versioning by including it in .gitgnore file:

Is does not make sense versioning something that is downloaded from Web any time you want.
You just download all packages after cloning the repository.

NuGet is a well-established technology and really useful for developers.

How does Visual Studio deal with npm ?

DON’T DO THIS: I WILL CHANGE IT IN THE NEXT TOPIC BELOW !

To get npm you need to download and install Node.js:

Visual Studio Npm Command

HINT
Do not install NPM Tools for Native Modules.

npm keeps a CACHE with all downloaded packages ( since ever ! ) in the following directory:

You may change the location of this CACHE with the following command:

To begin with npm you create the package.json file in your ASNET MVC or ASP.NET Core MVC Project:

The file will be created empty but below you find the complete file:

The devDepencies are packages you require for Development ( see Gulp below ).
The dependencies are packages you require for run-time.

To get the same result with command line you may open the Command Line in the PROJECT directory and run the following commands:

The init command will create the package.json file.
The install command will download the package and update the package.json file ( –save ).
The update command will download the packages listed in package.json file.

Eventually you will find a package-lock.json file.
It contains detailed information about the dependencies between packages.
Should you delete it, you may recreate it with the following command:

There is a nice extension for Visual Studio to open the Command Line without going to Windows Explorer and typing “cmd”:

To force an update you clean the SOLUTION:

Below you find the project structure created for an ASP.NET Mvc Project with npm:

But, you end up with 291 packages, 3.593 files and 8.97 MB ( Visual Studio 16.4 + ASP.NET Core MVC 3.1 ), not just the 4 packages you asked for !

The final result will be the following:

  • A node_modules PER PROJECT, instead of PER SOLUTION like you get with NuGet.
  • If you have more than one MVC Project per Solution, you will have multiple node_modules directories.
  • Package Manager Console will not work, complaining a missing package.json for the SOLUTION.
  • 291 packages, 3.593 files and 8.97 MB in the node_modules.

Well, there are some things we may improve here…

How do I deal with npm ?

Below you find the project structure I create for an ASP.NET Core Mvc PROJECT with npm:

First, take care of your PROJECT !

Create an empty package.json ( DO NOT INCLUDE ANY PACKAGE ! ) file in your PROJECT:

This file will be visible inside Visual Studio in your PROJECT !

Go to command line at your PROJECT directory and execute the following commands.
The commands below install del and gulp in the global npm directory ( see npm CACHE directory above ):

The commands below may be used to update these packages, when necessary:

Npm In Visual Studio 2019

The commands below create a symbolic link from global npm directory into the node_modules of your PROJECT:

With the symbolic link, you have just 1 copy of these packages in the global npm directory !
If you don´t install these packages in your PROJECT, Visual Studio will complain about Gulp and the Task Runner Explorer ( see Gulp below ) will not work.

Second, take care of your SOLUTION.

Create a package.json file in your SOLUTION directory:

If you add this file to your solution it will be visible in a ( Solution ) folder named “Solution Items”.

Download warcraft 3 reign of chaos crack torent. Go to command line at your SOLUTION directory and execute the following command:

You may also use the Visual Studio Package Manager Console:

Visual Studio -> Tools – NuGet Package Manager -> Package Manager Console

The final result will be the following:

  • A node_modules PER SOLUTION, like NuGet.
  • If you have more than one MVC Project per Solution, you will have only 1 node_modules directory.
  • Package Manager Console will work perfectly with npm, for install/update/uninstall.
  • Task Runner Explorer ( see Gulp below ) will work perfectly.

How does Visual Studio deal with Gulp ?

Gulp is a wonderful Task Automation JavaScript Tool fully integrated in Visual Studio.
As the JavaScript packages are downloaded in node_modules directory, Gulp will help us to copy the files we really need to:

  • /Context and /Scripts directories for ASP.NET MVC Application
  • /wwwroot directory for ASP.NET MVC Core Application

The example below is for ASP.NET Core, but may be easily adapted to ASP.NET MVC.
To begin just add a gulpfile.js to your PROJECT with the following content:

I guess the code is quite easy to understand.
As you can see it needs del and gulp packages to run.
This file will create two tasks: npm-copy and npm-delete.
To execute it just right-click the file above and select Task Runner Explorer.

After running the npm-copy Task I get the following structure under my wwwroot directory:

Epilogue

Please, let me know if it works for you or you have any comments.