Monday, 19 April 2021

How to build custom bootstrap bundle using Rollup

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