~ Dmitry Shvetsov
Navigate back to the homepage

How to use Webpacker with npm instead of Yarn, Rails guide

Dmitry Shvetsov
March 26th, 2018 · 1 min read

Photo by Vidar Nordli-Mathisen on Unsplash

This article will guide you how to replace Yarn with npm for Webpacker gem

Webpacker is an awesome tool and giant step towards front-end friendly development environment in Rails. But Webpacker requires installing Yarn. But what if want to use npm?

This article will guide you how to replace Yarn with npm for Webpacker gem.

Preparation

If you starting a brand new Rails app include --skip-yarn option.

If you starting a brand new Rails app include --skip-yarn option.

1$ rails new try_webpacker_with_npm_app --webpack --skip-yarn

Even with --skip-yarn flag enabled rails new command will try to install npm packages via Yarn. If you have Yarn installed then you need to execute the steps below to remove webpacker installation via Yarm. Otherwise, you will be warned with Yarn not installed… and no more actions are required.

If you already started to use webpacker with Yarn you have to find and delete yarn.lock file and previously installed node modules.

1$ rm yarn.lock
2$ rm -rf node_modules

You can remove bin/yarn file as well.

Please note that you have to use webpacker 3.4.1 or greater and Ruby on Rails 5.1 and greater.

Replacement

First, you need to disable Webpacker and Yarn integrity check. Add the line below to development and production environment configuration files.

1config.webpacker.check_yarn_integrity = false

The second step is to remove all rake tasks related to Yarn and define new npm tasks in Rakefile after Rails.application.load_tasks line.

The last part. New npm tasks will be in lib/tasks/webpacker.rake file. webpacker:check_npm and webpacker:npm_install will be doing the same job as removed webpacker:yarn_install and webpacker:check_yarn tasks.

The whole solution is listed below:

1# config/environments/development.rb
2
3Rails.application.configure do
4 config.webpacker.check_yarn_integrity = false
5
6 # the rest of the file is omitted
1# config/environments/production.rb
2
3Rails.application.configure do
4 config.webpacker.check_yarn_integrity = false
5
6 # the rest of the file is omitted
1# Rakefile
2
3require File.expand_path('../config/application', __FILE__)
4
5Rails.application.load_tasks
6
7# Replace yarn with npm
8Rake::Task['yarn:install'].clear if Rake::Task.task_defined?('yarn:install')
9Rake::Task['webpacker:yarn_install'].clear
10Rake::Task['webpacker:check_yarn'].clear
11Rake::Task.define_task('webpacker:verify_install' => ['webpacker:check_npm'])
12Rake::Task.define_task('webpacker:compile' => ['webpacker:npm_install'])
1# lib/tasks/webpacker.rake
2
3namespace :webpacker do
4 task :check_npm do
5 begin
6 npm_version = `npm --version`
7 raise Errno::ENOENT if npm_version.blank?
8 version = Gem::Version.new(npm_version)
9
10 package_json_path = Pathname.new("#{Rails.root}/package.json").realpath
11 npm_requirement = JSON.parse(package_json_path.read).dig('engines', 'npm')
12 requirement = Gem::Requirement.new(npm_requirement)
13
14 unless requirement.satisfied_by?(version)
15 $stderr.puts "Webpacker requires npm #{requirement} and you are using #{version}" && exit!
16 end
17 rescue Errno::ENOENT
18 $stderr.puts 'npm not installed'
19 $stderr.puts 'Install NPM https://www.npmjs.com/get-npm' && exit!
20 end
21 end
22
23 task :npm_install do
24 system 'npm install'
25 end
26end

More articles from Dmitry Shvetsov

An alternative to Rails `before_action`

Rails ` before _ action ` is a good tool but often used incorrectly. In this article, I will show what is wrong and my remedy for…

January 29th, 2017 · 1 min read

How to Speed Up Code Review Process With Code Review Time

This is a chapter from Team Lead 101: Manage and Grow Engineering Teams in Small Startups ebook.  Get your copy here. Photo by Margarida…

July 25th, 2020 · 1 min read
© 2017–2020 Dmitry Shvetsov
Link to $https://twitter.com/iamdidev