3

I have hard time understanding the difference between "require" and "import" inside application.js file (Rails 6).

I've got an excerpt of Michael Hartl's book that describes the way to add jquery & bootstrap to my app.

Steps:

yarn add jquery@3.4.1 bootstrap@3.4.1

then add to config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)
module.exports = environment

and finally in application.js:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
import "bootstrap"

The question is - why is jquery required, and bootstrap imported? Thank you,

Update

EDIT - the comment by @arieljuod has helped me to look for solution in javascript realm, I'll leave the question just for future reference. application.js is a javascript file and has nothing to do with rails itself.

OuttaSpaceTime
  • 710
  • 10
  • 24
LE-HU
  • 631
  • 5
  • 17
  • 1
    https://stackoverflow.com/questions/31354559/using-node-js-require-vs-es6-import-export these are not rails concepts, you'll find way more information looking at javascript articles – arieljuod Jan 13 '21 at 01:40
  • Thank you, that's a valuable insight. – LE-HU Jan 14 '21 at 23:22
  • found this article to be insightful https://insights.untapt.com/webpack-import-require-and-you-3fd7f5ea93c0 – OuttaSpaceTime Apr 13 '22 at 07:31

1 Answers1

1

Thus: I would use require for dynamic uses cases as shown in the doc examples and import everywhere else.

I am not sure if there are any side effects on treeshaking with using require. The documentation states that it depends on import and export

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export.

Just to not for the example with JQuery, the documentation recommends to use ProvidePlugin here instead: https://webpack.js.org/plugins/provide-plugin/#usage-jquery

OuttaSpaceTime
  • 710
  • 10
  • 24