Introduction

This text is in beta.

Rails5.2 + WebPacker 3.5.5-> in an existing project Rails6.1 + WebPacker5.2.1, so follow the steps etc Make a note.

Rails5.2 -> Rails6.1

Update the project rails & Webpacker gem

After moving to the root path of the project, edit gems.rb (Gemfile) and Update the bundled gem.

% vim gems.rb
gem 'rails', '~> 6.1.0'
gem 'webpacker', '~> 5.2.1'
% bundle update

Check the gem's dependencies in the message that appears and there is a problem with the dependencies Edit gems.rb (Gemfile) so that it disappears and run bundle update I will do it. Repeat this process until there are no errors.

Perform an update task

% bundle exec rails app:update

If the project is not versioned in the repository with Git etc Make a backup before executing.

Execution points out some file conflicts and overwrites I'll ask you, but I'll overwrite everything.

Corresponding file overwritten and on repository (or backup) Check file diffs and restore required description for overwritten files To do.

Webpacker 3.5.5 -> 5.2.1

% bundle exec rails webpacker:install

Execution points out some file conflicts and overwrites I'll ask you, but I'll overwrite everything.

Corresponding file overwritten and on repository (or backup) Check file diffs and restore required description for overwritten files To do.

Updates around Vue.js (optional)

% bundle exec rails webpacker:install:vue

If you are using other frameworks, support If there is a task, execute it, there is no corresponding task In that case, I will update it myself.

Change babel-loader settings (optional)

When compiling an HTML template with Vue.js for execution in a browser Add the following settings to config/webpack/environment.js.

// Vue.js full version (with Compiler)
environment.config.resolve.alias = { 'vue$': 'vue/dist/vue.esm.js' }

Without this setting, without compiler vue/dist/vue.runtime.esm.js It will be loaded. (If you're doing run-time compilation of HTML templates in Vue.js An error will occur. )

Rails-erb-loader update (optional)

% bundle exec rails webpacker:install:erb

Update node_modules

% yarn install

Check the NPM module dependencies in the message that appears and find the NPM module you need If so, install it with yarn add and then run yarn install again. To do. Repeat this procedure until there are no errors.

Delete .babelrc

Required for Webpacker 3.x, but for Webpacker 4.x and later babel.cofig.js, postcss.config.js, .postcssrc.yml Since it has been replaced with, delete it.

bundle

% bin/webpack

Operation check

% bundle exec rails s

rails-ujs-> @ rails/ujs (optional)

% yarn add @rails/ujs

If you are using Sprocket App/assets/javascripts/application.js Change rails-ujs to @ rails/ujs.

//= require @rails/ujs

If you are using or using Webpacker, app/javascript/packs/application.js Add the following two lines to.

import Rails from '@rails/ujs';
Rails.start();

If you are migrating to management with Webpacker, it is in erb javascript_include_tag'application' javascript_pack_tag to'application' change.

Change WebPacker settings (optional)

Enable SplitChunk (optional)

Add the following settings to config/webpack/environment.js.

environment.splitChunks()

javascriot_pack_tag in erb to javascript_packs_with_chunks_tag Change to.

Exclude node_modules from babel-loader (optional)

Add the following settings to config/webpack/environment.js.

environment.loaders.delete('nodeModules')

In Webpacker 4.x and later, by default node_modules Files in the directory are (Babel's) via babel-loader It is subject to trampiling.

With this addition, Webpacker4 or later as well as WebPacker3 babel-loader ignores node_modules directory It will be the behavior.

Node_modules when checking the operation with a browser on Webpacker4 or later If you're experiencing errors in the NPM module below, try changing this setting I recommend.

Files in the node_modules directory via babel-loader Unexpected conversion is being done by being the target of the trampile in May be the cause.

For example, in a bundled file in the node_modules directory If there is a description of module.exports = in, WebPacker 4.x or later By default,

Cannot assign to read only property 'exports' of object

An error may occur.

I manage my own NPM modules in the node_modules directory Since it is used from the client side, the transpile in Babel is From the transpile target of babel-loader because of necessary etc. If you cannot remove the node_modules directory, do the following: In babel-loader any NPM module that is in error It can be excluded from the target of transpile.

const nodeModulesLoader = environment.loaders.get('nodeModules')
if (!Array.isArray(nodeModulesLoader.exclude)) {
  nodeModulesLoader.exclude = (nodeModulesLoader.exclude == null)
    ? []
    : [nodeModulesLoader.exclude]
}
nodeModulesLoader.exclude.push(/Any NPM module/)

[RAILS] WebPacker 3.x-> 5.x