如何使用 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'; 

包.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"
  }
}

gulpfile.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';