Gulp+Browserify打包Swiper报sourceType: module错误解决方案

报错根因 #

Browserify 默认仅识别 CommonJS 模块规范，解析到 node_modules 中 Swiper 提供的 ESM 格式产物（swiper.esm.js）时，未经过语法转译就直接按普通脚本解析，触发 import/export 仅可在 sourceType: module 环境下使用 的解析错误。

可落地修复方案 #

方案1（推荐）：调整Babel转译范围，覆盖Swiper相关ESM依赖 #

1. 先安装齐全必要构建依赖

   npm install @babel/core @babel/preset-env babelify vinyl-buffer vinyl-source-stream gulp-uglify -D
   

2. 修改项目根目录的 .babelrc 配置，明确将ESM模块转译为CommonJS格式供Browserify识别

   {
     "presets": [
       ["@babel/preset-env", {
         "targets": "> 0.25%, not dead",
         "modules": "commonjs"
       }]
     ]
   }
   

3. 修改 gulpfile.babel.js 中的JS构建任务，调整babelify的转译规则，不要全量排除node_modules，仅跳过非Swiper依赖的转译

   import gulp from 'gulp';
   import browserify from 'browserify';
   import source from 'vinyl-source-stream';
   import buffer from 'vinyl-buffer';
   import uglify from 'gulp-uglify';
   import babelify from 'babelify';
   
   function buildJs() {
     return browserify({
       entries: ['./src/index.js'], // 替换为你的项目实际JS入口路径
       debug: false
     })
     .transform(babelify, {
       global: true, // 开启全局转译，覆盖node_modules下的匹配文件
       // 排除node_modules下除swiper及其内置依赖（ssr-window、dom7）之外的所有文件
       ignore: [/node_modules\/(?!(swiper|ssr-window|dom7)\/).*/]
     })
     .bundle()
     .pipe(source('index.min.js')) // 压缩后输出的文件名
     .pipe(buffer())
     .pipe(uglify()) // 执行压缩
     .pipe(gulp.dest('./dist/js/')); // 替换为你的项目实际输出目录
   }
   
   export default buildJs;
   

   注意：Swiper 依赖的 ssr-window、dom7 同样是ESM格式，必须一起纳入转译范围，否则会触发相同的语法报错。

方案2（轻量备选）：直接引入Swiper的CommonJS版本产物 #

如果不想开启node_modules下的文件转译，可以直接修改引入Swiper的代码路径，跳过ESM版本文件，直接引用Swiper提供的CommonJS格式产物，无需额外转译即可被Browserify识别：

// 替换原来的 import Swiper from 'swiper'
import Swiper from 'swiper/swiper-bundle.cjs.js'

不同Swiper版本的CommonJS文件路径可能有差异，可以去node_modules/swiper目录下找后缀为.cjs.js/.common.js的对应文件确认路径。

常见避坑点 #

• 配置babelify时如果不设置global: true，babel默认只会处理项目源码目录下的文件，不会转译node_modules内的Swiper文件，报错不会消失。
• gulp-uglify 仅支持ES5及以下语法的压缩，必须经过babel转译后再执行压缩，否则会触发压缩阶段的语法错误。
• 如果项目根目录package.json中设置了"type": "module"，会默认把所有.js文件按ESM解析，和Browserify的默认解析规则冲突，非必要不要开启该配置。

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