Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to build custom bootstrap bundle using Rollup

Tags:

People also ask

What is Rollupjs?

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.