Rails 6 JavaScript目录结构解析及Gem引入、自定义JS文件存放问题咨询

Hey there! Let's break down your questions step by step since you're new to Rails and figuring out how JavaScript is organized in your application.

Let's go through each one clearly:

• app/assets/config/: This is configuration for the Sprockets asset pipeline (Rails' older system for handling static assets). Your manifest.js tells Sprockets which assets to compile—right now it's handling images and CSS, not JavaScript. This directory isn't where you'll write or manage your application's JS logic, especially if your project uses Webpack (which it looks like it does).
• app/javascript/channels/: This is exclusively for Action Cable, Rails' framework for WebSocket-based real-time features. The consumer.js creates the core WebSocket connection instance, and index.js automatically loads all files ending in _channel.js (these are the channel files you generate with bin/rails generate channel). This directory is only for real-time communication code, not general app JS.
• app/javascript/packs/: This is the entry point directory for Webpack (or jsbundling-rails, Rails' modern JS tooling). Your application.js is the main entry file—Webpack starts here to bundle all your JS dependencies (like Rails UJS, Turbolinks, ActiveStorage, and your Action Cable channels). Any JS you want compiled by Webpack needs to be referenced (directly or indirectly) from these pack files.

1. Configuring Gems like jquery-rails Without app/assets/javascripts/application.js #

That missing application.js file means your project is using Webpack-based JS tooling (not the old Sprockets JS pipeline), so the //= require syntax won't work here. Here's how to add jQuery properly:

1. Skip relying solely on the jquery-rails gem—instead install the npm package:

   yarn add jquery # or npm install jquery if you use npm
   

2. Import and expose it globally in app/javascript/packs/application.js:

   import $ from 'jquery';
   // Make jQuery available globally so you can use $ in other files or templates
   window.$ = window.jQuery = $;
   

   The jquery-rails gem is designed for the Sprockets pipeline, so it's not necessary in a Webpack-driven Rails app.

2. Where to Store Custom JavaScript Files #

Putting JS in app/views/friends/javascripts/ isn't right—views are for template files, not asset code. Here's the correct approach:

1. Create a custom directory inside app/javascript/ to organize your code. For example:
   • app/javascript/custom/ for general custom JS
   • app/javascript/friends/ for JS specific to your friends feature
2. Place your custom files there, like app/javascript/friends/alert.js
3. Import the file in app/javascript/packs/application.js so Webpack compiles it:

   import '../friends/alert';
   

   This ensures your custom JS is bundled into the main application.js file, which gets loaded via <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>.

A quick note on SweetAlert2 too: Install it via npm (yarn add sweetalert2), then import it in application.js and expose it globally if needed:

import Swal from 'sweetalert2';
window.Swal = Swal;

This lets you use Swal.fire() anywhere in your app's JS or template <script> tags.

内容的提问来源于stack exchange，提问作者programming_ritual