Working with NPM and Yarn in Rider
To use NPM with ASP.NET (Core) projects, we must have Node.js installed on our machine. We can verify correct installation from Rider’s settings under Languages & Frameworks | Node.js and NPM.
While Node.js comes with NPM as its package manager many are using Yarn as an alternative. While both work with the same package formats and the NPM registry, many developers favor one or the other.
Rider supports both package managers and lets us pick our own favorite from the settings under Languages and Frameworks | Node.js and NPM, under package manager.
Rider will use our preference when installing or updating dependencies, and when running scripts. When opening a project that contains a
yarn.lock file, Rider will use Yarn (when installed) to install any missing dependencies in our project.
Working with NPM packages
There are two places where we can install NPM packages. The first is within our project where package contents are stored directly inside our project directly. The second is where we store packages in a global location on our computer. We will look at working with NPM package on a global basis later, so let’s dig into project-based packages first.
We can install new packages for our projects through the Terminal window (open it using the View | Tool Windows | Terminal menu or using Ctrl+Alt+1).
If you are using NPM for project dependencies, you can run the following command:
npm install --save <package_name>
For a development dependency, you can use the following command:
npm install --save-dev <package_name>
Instead if you are using Yarn, you can install the same package using any of these commands (project dependency and development dependency):
yarn add <package_name>
yarn add <package_name> --dev
The following is an example of installing the package for angular-translate to the project’s development dependency.
Similarly, NPM packages can be upgraded using the command line.
Another way of installing (or upgrading/uninstalling) NPM packages is by editing the
package.json file and adding or removing dependencies here. Rider provides completion for both package names as well as versions.
At any time, we can then use the Tools | Run ‘npm install’ context menu on our
package.json file and invoke the underlying package manager to ensure the expected dependencies are available for us to work with.
Working with (global) NPM packages
Let’s look at installing global packages using Rider. Global packages are packages that will be installed machine-wide. They are typically used to install command-line tools, such as Grunt or Gulp and others.
From the settings under Languages and Frameworks | Node.js and NPM, we can see the global packages that are currently installed on our machine. Using the plus symbol (+), we can install additional packages into our project.
In the Available Packages dialog that opens, Rider will present us an overview of all packages available from the NPM registry. We can search, find and finally install the packages on our machine, optionally picking the version and additional install options.
Similar to installing packages, we can also upgrade packages here. When updates for installed packages are available, Rider will let us know here. We can use the Upgrade button to install the latest version of the package.
Removing or uninstalling a package can be done here as well, using the uninstall button.
Migrating a project from NPM to Yarn
To migrate a project that is currently using NPM to use Yarn, we will need to open a Terminal window in Rider (from the View | Tool Windows | Terminal menu or using Ctrl+Alt+1).
We need to issue the
yarn command to migrate the project and to create the required
yarn.lock file in our project directory.
We’d love to hear your feedback on these features! Give Rider 2018.1.2 a try!