Problems using rollup.js with gulp to build JavaScript

Question

I'm trying to build bootstrap 5 JavaScript components. I'm not very experienced on JavaScript, as this is not my main line of work, so I need a detailed explanation on how to do this.

What I've tried so far:

package.json

"@babel/core": "^7.19.1",
"@babel/preset-env": "^7.19.1",
"@rollup/plugin-babel": "^5.3.1",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"rollup": "^2.79.0",
"rollup-stream": "^1.24.1",
"vinyl-source-stream": "^2.0.0"

gulpfile.js

var gulp      = require('gulp'),
babel         = require('gulp-babel'),
rollup        = require('gulp-rollup'),
rollup_babel  = require('@rollup/plugin-babel').default,
source        = require('vinyl-source-stream');

gulp.task('bootstrap', function() {
    gulp.src( [
        './js/src/bootstrap.js'
    ] )
    .pipe(rollup({
        input: './js/src/bootstrap.js',
        output: {
            globals: { '@popperjs/core': 'Popper' },
            generatedCode: 'es2015',
            format: 'umd',
            name: 'bootstrap'
        },
        external: [ '@popperjs/core' ],
        plugins: [
            rollup_babel({
                presets: [ '@babel/preset-env' ],
                babelrc: false,
                exclude: 'node_modules/**' }),
        ]
    }))
    // give the file the name you want to output with.
    .pipe(source('bootstrap.js'))
    // and output to directory
    .pipe(gulp.dest('./js/bootstrap/'))
});

When executing this, I get the following error:

[13:10:25] Starting 'bootstrap'...
[13:10:26] 'bootstrap' errored after 63 ms
[13:10:26] TypeError in plugin "gulp-rollup"
Message:
    Cannot read property 'rollupVersion' of undefined
Details:
    domainEmitter: [object Object]
    domainThrown: false


Process finished with exit code 1

That's not a lot of details on the exit... Can't figure it out what's going on.

I've try following the documentations, but it all seems very confusing. It's difficult to understand which one of the approaches are the correct. Which versions or plugins I should be using.

Do I need all those packages? This is the right approach? Those are the right plugins to do it? I need help on doing this in the best way, please.

Important! I need to keep using gulp, as I have many more configs on my files. I need to know what is the most recent approach to build those JS, specifically bootstrap 5 JS. So if there is a better way to build Bootstrap that I don't know, I'll may accept the answer.

Problems using rollup.js with gulp to build JavaScript

0 Answers