使用Gulp+Browserify+Babelify转译ES6代码至ES5时出现模块找不到错误的问题排查

核心错误原因 #

你遇到的Cannot find module 'snake'错误，根源是模块导入路径的写法不符合Node/Browserify的模块解析规则：
当你写import {Snake} from 'snake'时，Browserify会默认去项目根目录的node_modules文件夹里寻找名为snake的第三方包，而不是你本地src/js目录下的snake.js文件。

解决方案步骤 #

1. 修正main.js的导入路径
   把导入语句改成相对路径的形式（指向你本地的模块文件）：

// 两种写法都可以，Browserify支持省略.js后缀
import {Snake} from './snake.js'
// 或者
import {Snake} from './snake'

2. 验证你的核心假设
   你的理解是对的：Browserify只需要传入入口JS文件（这里是src/js/main.js），它会自动递归解析入口文件里的所有依赖（包括你导入的Snake模块），不需要手动把所有依赖文件都传给Browserify。问题完全出在路径写法上，不是Browserify的使用逻辑错误。

3. 修复额外的watch任务路径问题
   你的watch任务当前监听的是./js/*.js，但你的JS源文件都在src/js/目录下，这个路径会导致修改main.js或snake.js时无法触发自动转译，需要修正为：

gulp.task('watch', () => {
  return gulp.watch('./src/js/*.js', gulp.series('jsTranspile'));
});

验证修复效果 #

修改完成后，重新执行gulp start，Browserify就能正确找到并转译snake.js模块，转译流程应该可以正常完成了。

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