Ihave recently had the pleasure of updating our app from Rails 4 to Rails 6. Though it initially seemed to be a very smooth transition, I came across some minor problems as testing got underway.

最近， 我很高兴将我们的应用程序从Rails 4升级到Rails6。尽管最初的过渡似乎很顺利，但是随着测试的进行，我遇到了一些小问题。

The biggest issue was, of course, that NONE of my custom Javascript modules worked and I was encountering bugs with my Bootstrap and SB-Admin-2 JS scripts.

当然，最大的问题是我的自定义Javascript模块都无法正常工作，而且我的Bootstrap和SB-Admin-2 JS脚本遇到了错误。

Some of the bugs I was seeing in my browser developer console were:

我在浏览器开发人员控制台中看到的一些错误是：

TypeError: $(…).metisMenu is not a function

TypeError：$(…).metisMenu不是函数

Uncaught ReferenceError: $ is not defined

未捕获的ReferenceError：未定义$

And absolutely nothing online was (a) relevant to my stack and (b) solving my problem. So for this reason, I thought I’d put up something in case other people run into the same problem.

绝对没有任何在线内容(a)与我的筹码有关以及(b)解决我的问题。 因此，出于这个原因，我想我会提出一些建议，以防其他人遇到相同的问题。

NB: Other solutions online may work for those who do not implement Turbolinks in their stack.

注意：其他在线解决方案可能适用于未在其堆栈中实现Turbolink的用户。

Webpacker设置 (Webpacker Set-Up)

As this guide is not for beginners, I will not be giving an introduction to Webpacker (if needed, see: Guide 1, Guide 2 and Guide 3). I found the directory structure below most suitable for my needs:

由于本指南不适合初学者使用，因此我将不对Webpacker进行介绍(如果需要，请参阅： 指南1 ， 指南 2和指南3 )。 我发现以下最适合我的目录结构：

When you run rails webpack:install, the javascript folder is automatically created, complete with the packs folder and the application.js and application.scss files. Taking this structure, I added another folder, custom, which I used to store my custom and third-party modules.

运行rails webpack:install ，将自动创建javascript文件夹，其中包含packs文件夹以及application.js和application.scss文件。 采用这种结构，我添加了另一个文件夹custom ，该文件夹用于存储自定义模块和第三方模块。

My application.scss file is empty for the moment and the contents of my application.js are:

我的application.scss文件目前为空，而application.js的内容为：

require(“@rails/ujs”).start()require(“turbolinks”).start()require(“@rails/activestorage”).start()require(“channels”)require(“jquery”)require(‘popper.js’)require(“jquery.easing/jquery.easing”)require(‘@fortawesome/fontawesome-free/js/all’)require(“bootstrap/dist/js/bootstrap.bundle”)require(“channels”)require(“./custom/modal”)require(“./custom/sb-admin-2”)console.log(‘Hello from application.js’)

(Keep in mind that if you copy the above code directly, you will get errors as the quotation marks are not recognised!!!)

(请记住，如果直接复制上面的代码，由于引号不能被识别，将导致错误！！！)

My custom modal module pertains to the functionality of my modals. I wanted their contents to be changed depending on the link that was used to show them using data-target parameters. For reference I provided my full modal.js code at the bottom of the article.

我的自定义模式模块与我的模式的功能有关。 我希望根据使用数据目标参数向他们展示的链接来更改其内容。 作为参考，我在文章底部提供了完整的modal.js代码。

Below are the packages found in package.json, compare the list to yours and determine if you have any missing.

以下是在package.json中找到的软件包，将列表与您的列表进行比较，并确定是否缺少任何文件。

{  "dependencies": {    "@fortawesome/fontawesome-free": "^5.14.0",    "@rails/activestorage": "^6.0.3-2",    "@rails/ujs": "^6.0.3-2",    "@rails/webpacker": "5.1.1",    "autoclean": "^1.0.2",    "bootstrap": "^4.5.0",    "channels": "^0.0.4",    "core-js": "^3.6.5",    "expose-loader": "^1.0.0",    "fontawesome": "^5.6.3",    "jquery": "^3.5.1",    "jquery-ujs": "^1.2.2",    "metismenu": "^3.0.6",    "popper": "^1.0.1",    "popper.js": "^1.16.1",    "rails-ujs": "^5.2.4-3",    "regenerator-runtime": "^0.13.7",    "startbootstrap-sb-admin-2": "^4.1.1",    "turbolinks": "^5.2.0",    "yarn": "^1.22.4"  },  "devDependencies": {    "webpack-dev-server": "^3.11.0"  }}

And finally, in your app/config/webpack/environment.js, you want the following:

最后，在您的app / config / webpack / environment.js中 ，您需要以下内容：

const { environment } = require('@rails/webpacker');const webpack = require("webpack");environment.plugins.append("Provide", new webpack.ProvidePlugin({    $: 'jquery',    jquery: 'jquery',    jQuery: 'jquery',    'window.jQuery': 'jquery',    Popper: ['popper.js', 'default']}));module.exports = environment;

That’s all for the Webpacker. Moving on to the Javascript…

Webpacker就这些了。 继续使用Javascript ...

定制和第三方Javascript (Custom and Third Party Javascript)

The problem with running the custom modules alongside Turbolinks is that you are no longer waiting for the ‘document’ to load, but for Turbolinks to initialise the page. So while your code may have previously looked like this:

与Turbolinks一起运行自定义模块的问题在于您不再等待加载“文档”，而是等待Turbolinks初始化页面。 因此，虽然您的代码以前可能看起来像这样：

function readyFn(jQuery) {  console.log("Hello World!")};$(window).on('load', readyFn);

It will now have to look like this:

现在它将看起来像这样：

function readyFn(jQuery) {  console.log("Hello World!");};$(document).on('turbolinks:load', readyFn);// or $(document).on('turbolinks:load', function() {    function() {       console.log("Hello World!");   }};

I added the $(document).on('turbolinks:load', function() { //code } to the top of the SB-Admin-2.js file so that it was also comaptible with Turbolinks. And that’s it! I hope this was helpful and will save someone out there days of tearing their hair out and going for angry runs.

我将$(document).on('turbolinks:load', function() { //code }到SB-Admin-2.js文件的顶部，以便它也可以与Turbolinks兼容。就是这样！我希望这会有所帮助，并且可以避免有人将头发撕裂并发怒的日子。

Modal.js (Modal.js)

$(document).on('turbolinks:load', function() {  $('#preview').on('shown.bs.modal',function (event) {    var link = $(event.relatedTarget);    var type = link.data('type');    var id = link.data('linkid');        var modal = $(this);    if (type.includes("video")) {      modal.find('.modal-body video').attr('src', id);      modal.find('.modal-body video').attr('id', 'modal-activated');      modal.find('.modal-body video').attr('data-type', type);      modal.find('.modal-body video').toggleClass('d-none');}    else if (type.includes("image")) {      modal.find('.modal-body img').attr('src', id);      modal.find('.modal-body img').attr('id', 'modal-activated');      modal.find('.modal-body img').attr('data-type', type);      modal.find('.modal-body img').toggleClass('d-none');    }  });});$(document).on('turbolinks:load', function () {  $('#preview').on('hidden.bs.modal', function (event) {    var link = $('#modal-activated');    var type = link.data('type');    var modal = $(this);if (type.includes("video")) {      modal.find('.modal-body video').toggleClass('d-none');    }    else if (type.includes("image")) {      modal.find('.modal-body img').toggleClass('d-none');    }  });});