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.
from How to build custom bootstrap bundle using Rollup
No comments:
Post a Comment