如何使用Browserify/Gulp引入Bootstrap 4依赖（jQuery与Popper.js）

我来帮你梳理下用Browserify整合Bootstrap 4、jQuery和Popper.js的具体步骤，你已经完成了依赖安装这一步，接下来只需要配置入口文件和Gulp任务就行：

1. 创建Browserify入口文件 #

首先在你的项目源码目录（比如src/js/）下创建一个入口文件，比如main.js，按照以下顺序引入依赖——因为Bootstrap 4需要全局的jQuery和Popper对象，所以要先把它们挂载到全局：

// 引入jQuery并挂载到全局window对象，满足Bootstrap的全局依赖要求
window.$ = window.jQuery = require('jquery');

// 引入Popper.js并挂载到全局，Bootstrap的弹窗、下拉等组件需要它
window.Popper = require('popper.js');

// 最后引入Bootstrap的JS模块，此时它能找到全局的jQuery和Popper
require('bootstrap');

2. 配置Gulp的Browserify打包任务 #

接下来修改你的gulpfile.js，配置一个打包JS的任务，将入口文件和所有依赖打包成一个最终的脚本文件：

const gulp = require('gulp');
const browserify = require('gulp-browserify');
const concat = require('gulp-concat');

// 定义打包JS的任务
gulp.task('bundle-js', function() {
  return gulp.src('src/js/main.js') // 指定你的入口文件路径
    .pipe(browserify({
      insertGlobals: true, // 自动插入全局变量，确保jQuery/Popper能被Bootstrap识别
      debug: !gulp.env.production // 开发环境保留sourcemap，方便调试；生产环境关闭
    }))
    .pipe(concat('bundle.js')) // 打包后的文件名
    .pipe(gulp.dest('dist/js')); // 打包文件的输出目录
});

// 设置默认任务，运行gulp命令时自动执行bundle-js
gulp.task('default', ['bundle-js']);

3. 运行Gulp任务并在HTML中引入打包文件 #

• 在终端运行gulp命令，Gulp会自动执行打包任务，生成dist/js/bundle.js
• 在你的HTML文件中，只需要引入这个打包后的脚本即可，不需要再单独引入jQuery、Popper或Bootstrap的JS文件：

<script src="dist/js/bundle.js"></script>

注意事项 #

• 确保你安装的是popper.js（而非Bootstrap 5使用的@popperjs/core），从你的package.json来看已经选对了依赖，没问题
• 如果开发时需要实时监听文件变化并自动打包，可以添加gulp-watch插件，给任务加上监听逻辑
• 生产环境打包时，可以添加gulp-uglify插件压缩代码，优化文件体积

内容的提问来源于stack exchange，提问作者Luke MInalll