Скачать или смотреть How to Use the <script> Tag in Rails 6 HTML Files

Discover how to include JavaScript files directly in your Rails 6 views using the `<script>` tag for a faster development experience.
---
This video is based on the question https://stackoverflow.com/q/63925846/ asked by the user 'Nhật Huy' ( https://stackoverflow.com/u/13775293/ ) and on the answer https://stackoverflow.com/a/63927794/ provided by the user 'Jon' ( https://stackoverflow.com/u/625184/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Rails 6: how to use script tag in html file

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Use the <script> Tag in Rails 6 HTML Files

Hello and welcome! If you're working on a Rails 6 application, you might have run into some challenges regarding how to include JavaScript files in your HTML files. This guide will address a common issue faced by many developers: how to use the traditional <script> tag within your Rails view files instead of relying on Webpacker. Let's dive right in!

The Problem: Rails 6 and Webpacker

With the introduction of Rails 6, Webpacker is used by default for managing JavaScript files. The typical way to include JavaScript in your application would be something like this:

[[See Video to Reveal this Text or Code Snippet]]

This line would load file_name.js from the ./app/javascript/packs directory into your asset pipeline. While Webpacker is excellent for production environments, many developers prefer the straightforward approach of using the classic <script> tag when developing locally. This is due to the following reasons:

Simplicity: It feels more familiar and is easier to manage for small features or quick fixes.

Speed: Loading JavaScript directly can often be quicker during the development phase.

Proven Method: Many developers are comfortable with this method from previous versions of Rails.

The Solution: Using javascript_include_tag

To solve this issue, you can utilize the javascript_include_tag helper method in Rails. This method allows you to include JavaScript files directly, as follows:

[[See Video to Reveal this Text or Code Snippet]]

How It Works

When you use javascript_include_tag, it compiles and loads the JavaScript files from the asset pipeline, as opposed to the Webpack packs. Here’s what happens:

The following line in HTML:

[[See Video to Reveal this Text or Code Snippet]]

will be generated.

This code loads your specified JavaScript file directly without going through the Webpacker.

Important Setup: Manifest File

For the javascript_include_tag method to work properly, you need to ensure that your JavaScript files are referenced correctly in the manifest file located at app/assets/config/manifest.js. This step is crucial as it allows Rails to identify and serve your JavaScript files correctly.

Steps to Include Your JavaScript Files

Here’s a quick guide on how to include your JavaScript files using the steps outlined above:

Edit Manifest File: Open app/assets/config/manifest.js and ensure your JS file is referenced. It should look something like this:

[[See Video to Reveal this Text or Code Snippet]]

Use the Helper: In your view file (e.g., HTML or ERB), include your JavaScript like this:

[[See Video to Reveal this Text or Code Snippet]]

Development and Testing: You can now use this method while developing, providing that you have the file in the assets folder.

Production Ready: When you're ready to deploy, switch back to using javascript_pack_tag for better performance and packing with Webpacker.

Conclusion

In summary, while Rails 6 defaults to using Webpacker, you can still utilize the classic <script> tag for easier and quicker development by employing the javascript_include_tag. Just remember to keep your JavaScript files linked in the manifest, and you'll be well on your way to a smoother development experience.

Happy coding, and I hope this post helped solve your problem! If you have any questions or comments, feel free to reach out.