如何在 Rails Webpack 中添加自定义 JS

如何解决如何在 Rails Webpack 中添加自定义 JS

我正在开发一个 Rails 5.2 项目。我正在将我的所有资产从 Assetpipeline 转移到 Webpack。我已经：

• 安装了 webpacker gem
• 安装纱线
• 使用 yarn add ... 在 package.json 中的依赖项中添加了所有前端 gem ...
• 创建一个包含我需要的所有 javascripts 文件的文件夹
• 需要 app/javascript/packs/application.js 中的主 JS 文件

所有这些 JS 文件都来自 colorlib 的模板，它与资产管道配合得很好。我的 CSS 在 webpack 上运行良好，但我在浏览器控制台中出现 JS 文件错误，我收到“Uncaught TypeError:” 例如：Uncaught TypeError: $(...).metisMenu 不是函数。

我猜，我的所有 JS 文件之间都没有链接，并且当在我的主 JS 文件中调用 metisMenu 函数（例如）时，该函数未加载并且我收到错误消息。

也许我在某处错过了一些 Webpack 配置。

这是我的 app/javascript 目录树：

.
├── channels
├── js
│   ├── hyper.js
│   ├── ui
│   │   ├── component.chat.js
│   │   ├── component.dragula.js
│   │   ├── component.fileupload.js
│   │   └── component.todo.js
│   └── vendor
│       ├── bootstrap.bundle.js
│       ├── bootstrap-maxlength.min.js
│       ├── bootstrap-timepicker.min.js
│       ├── daterangepicker.js
│       ├── jquery.bootstrap-touchspin.min.js
│       ├── jquery.bootstrap.wizard.min.js
│       ├── jquery.js
│       ├── jquery.mask.min.js
│       ├── jquery.slimscroll.js
│       ├── jquery.toast.min.js
│       ├── metisMenu.js
│       ├── moment.js
│       └── select2.min.js
├── packs
│   ├── application.js
│   └── cable.js
└── stylesheets
    ├── app-dark.css
    ├── application.css
    ├── icons.css
    └── vendor
        ├── britecharts.min.css
        ├── buttons.bootstrap4.css
        ├── dataTables.bootstrap4.css
        ├── fullcalendar.min.css
        ├── jquery-jvectormap-1.2.2.css
        ├── responsive.bootstrap4.css
        ├── select.bootstrap4.css
        ├── simplemde.min.css
        └── summernote-bs4.css

这是我的 application.js 文件

/* eslint no-console:0 */
// This file is automatically compiled by Webpack,along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file,add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file,like app/views/layouts/application.html.erb

import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';
import * as ActiveStorage from 'activestorage';

Rails.start()
Turbolinks.start()
ActiveStorage.start()


require("js/hyper");

// CSS
import '../stylesheets/application'

// Images
const images = require.context('../images',true)
const imagePath = (name) => images(name,true)

window.jQuery = $;
window.$ = $;

有人已经在 Rails 上做过这种工作了吗？