Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.
According to Bootstrap 5 official documentation, we can import pre-compiled js files from bootstrap/js/dist
and build a custom bundle using (Webpack, rollup, ...).
https://getbootstrap.com/docs/5.0/getting-started/javascript/#individual-or-compiled
And in the optimizing section in docs, they gave an example of how you can import js files. https://getbootstrap.com/docs/5.0/customize/optimize/#lean-javascript
The problem:
I created a file named bootstrap.js
import 'bootstrap/js/dist/tooltip';
and I want only to use the Tooltip
plugin.
I use the below configuration for rollup
const plugins = [
babel({
exclude: 'node_modules/**',
// Include the helpers in each file, at most one copy of each
babelHelpers: 'bundled',
presets: [
[
'@babel/preset-env',
{
loose: true,
bugfixes: true,
modules: false
}
]
]
}),
nodeResolve()
]
const bundle = await rollup.rollup({
input: './js/vendors/bootstrap.js',
plugins,
})
await bundle.write({
format: 'umd',
file: './file.js'
})
After generating the file.js
and use an HTML page an error shows up in the console file.js:1727 Uncaught ReferenceError: process is not defined
Also I can't use bootstrap syntax to initialize the Tooltip
plugin
new bootstrap.Tooltip
gives an error of undefined bootstrap
.
I can achieve what I want by import these files from js/src
folder and export them as they use in js/src/index.umd.js
but following bootstrap official documentation on how to import their plugin seems not to work properly.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With