In the article introduced earlier , I implemented it by embedding codons in the HTML file, but from Rails 6 series, Webpacker Even though it was introduced, I thought that such a method should not be taken, so I decided to write an article.
The following is a quote from official page .
Webpacker makes it easy to use the JavaScript pre-processor and bundler webpack 5.x.x+ to manage application-like JavaScript in Rails. It coexists with the asset pipeline, as the primary purpose for webpack is app-like JavaScript, not images, CSS, or even JavaScript Sprinkles (that all continues to live in app/assets).
Webpacker is just a gem for getting Webpack into Rails. This Webpack allows you to compile Javascript. When you launch the rails app with the rails new command, your JavaScript pack (ie application.js) is placed under app/javascript/packs/and isin app/views/application.html.erb. <% = javascript_pack_tag'application','data-turbolinks-track':'reload' Included by the description of%>.
npm
npm is the package manager for Japascript. npm saves the downloaded packages in ./node_modules and a list of packages in ./package.json. In addition, record the dependency in ./package-lock.json and make node_modules reproducible.
From the story so far, it means "Install Bootstrap with npm and compile with Webpacker". Therefore, type the following command.
npm install bootstrap
Then you should see something like the following.
added 3 packages, changed 2 packages
You have 3 packages installed! This is how npm can install dependent packages. Finally, load require ("bootstrap ") in app/javascript/packs/applicaton.js and the installation is complete!
You can also deploy other packages such as jQuery in a similar way. Understand Webpacker and npm and smartly deploy Javascript packages.
Recommended Posts