如何使用Gulp为Bootstrap 5导入Popper

Question

我使用Gulp只导入用于Navbar的Collapse，但现在我还需要依赖Popper的Dropdown组件。如果我在下面的例子中包括Popper，我会在浏览器控制台Uncaught ReferenceError: require$$0 is not defined中得到一个错误

import Popper from "popper.js"; 
//import './node_modules/@popperjs/core/dist/umd/popper.js';
//import { createPopper } from './node_modules/@popperjs/core'; 
//import Alert from './node_modules/bootstrap/js/dist/alert';
//import BaseComponent from './node_modules/bootstrap/js/dist/base-component'; 
//import Button from './node_modules/bootstrap/js/dist/button';
//import Carousel from './node_modules/bootstrap/js/dist/carousel'; 
import Collapse from './node_modules/bootstrap/js/dist/collapse';
import Dropdown from './node_modules/bootstrap/js/dist/dropdown';
//import Modal from './node_modules/bootstrap/js/dist/modal';
//import Offcanvas from './node_modules/bootstrap/js/dist/offcanvas';
//import Popover from './node_modules/bootstrap/js/dist/popover';
//import Scrollspy from './node_modules/bootstrap/js/dist/scrollspy';
//import Tab from './node_modules/bootstrap/js/dist/tab';
//import Toast from './node_modules/bootstrap/js/dist/toast';
//import Tooltip from './node_modules/bootstrap/js/dist/tooltip'; 

package.json

{
"dependencies": {
"@popperjs/core": "^2.11.2",
"bootstrap": "^5.1.3",
"rollup": "^2.68.0"
},
"devDependencies": {
"@babel/core": "^7.17.5",
"@babel/preset-env": "^7.16.11",
"@babel/register": "^7.17.0",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-node-resolve": "^13.1.3",
"@rollup/stream": "^2.0.0",
"gulp": "^4.0.2",
"gulp-size": "^4.0.1",
"gulp-sourcemaps": "^3.0.0",
"gulp-uglify": "^3.0.2",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
}
}

gullfile.babel.js

import gulp from 'gulp';
import uglify from 'gulp-uglify';
const sourcemaps = require('gulp-sourcemaps');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const rollup = require('@rollup/stream');
const size = require('gulp-size');
var babel = require('@rollup/plugin-babel'); // *Optional* Depends on what JS features you want vs what browsers you need to support, *Not needed* for basic ES6 module import syntax support
var commonjs = require('@rollup/plugin-commonjs'); // Add support for require() syntax
var nodeResolve = require('@rollup/plugin-node-resolve'); // Add support for importing from node_modules folder like import x from 'module-name'
var cache; // Cache needs to be initialized outside of the Gulp task 
var mainJSFile = './bundle-main.js';
var endFile = 'bundle.js';
var dest = './build/';
gulp.task('js', function() {
return rollup({
input: mainJSFile,
// Apply plugins
plugins: [babel, commonjs(), nodeResolve],
cache: cache,
output: {
// Output bundle is intended for use in browsers
// (iife = "Immediately Invoked Function Expression")
format: 'iife',
sourcemap: true
}
})
.on('bundle', function(bundle) {
// Update cache data after every bundle is created
cache = bundle;
})
// Name of the output file.
.pipe(source(endFile))
.pipe(buffer())
.pipe(uglify())
.pipe(size())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dest));
});


gulp.task('watch', function(done){
gulp.watch([mainJSFile], gulp.series('js'));
done();
})

Answer 1

如果有效，请尝试执行此操作

import * as bootstrap from 'bootstrap';