955bdcb2bc
* Rename all GitHub links from thepracticaldev/dev.to to forem/forem * Use new site name * Rename to Forem * Rename more dev.to to forem * Remove unnecessary redirects * Rename DEV to Forem * Use Forem instead of DEV for branding * Use Forem instead of DEV for licensing * Use seedling instead of DEV logo
1.3 KiB
| title |
|---|
| Webpacker |
Webpacker
Forem has two JavaScript codebases.
One contains plain JavaScript, which you can read more about in this guide.
The other one is managed by Webpacker, and
it's located inside /app/javascripts, written using ES6+.
Currently, it's mainly used for Preact components, served via webpack which is
integrated into the Rails app using Webpacker.
There is a packs directory /app/javascript/packs where you can create new
"pack" files. Pack files are initializers for Webpacker.
Since Forem is not a Single Page Application (SPA), Preact components are mounted as needed by including the pack file in the view files.
For example:
<%= javascript_packs_with_chunks_tag "webShare", defer: true %>
The include statement corresponds to the pack
app/javascripts/packs/webShare.js
If you have more than one webpacker pack on the page, you need to include it in
the same javascript_packs_with_chunks_tag call. The reason being is it avoids
loading split chunks multiple times.
<%= javascript_packs_with_chunks_tag "webShare", "someOtherPack", defer: true %>
For more information in regards to javascript_packs_with_chunks_tag, see
https://github.com/rails/webpacker/blob/master/lib/webpacker/helper.rb