如何用gulp-babel生成单文件JS？解决import依赖未打包问题

我完全懂你的困扰——gulp-babel本身其实只负责转译ES6+语法，它并没有模块打包的能力。这就是为什么你用import $ from 'jQuery';的时候，转译后的代码里依然保留着模块引入的逻辑，却没有把jQuery的代码合并进去。

其实不用直接切换到webpack，我们可以给gulp搭配一些轻量的模块打包工具，比如browserify或者rollup，就能实现把依赖打包到最终文件里的需求，而且配置比webpack简单很多。

推荐方案：Gulp + Babelify + Browserify #

这个组合可以同时处理ES6语法转译和模块打包，完全满足你把jQuery编译到输出文件里的需求。

步骤1：安装依赖 #

首先安装需要的开发依赖包：

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

步骤2：配置gulpfile.js #

替换你的原有gulp配置为下面的代码：

const gulp = require('gulp');
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const uglify = require('gulp-uglify');

gulp.task('build-js', () => {
  return browserify({ entries: './src/main.js', debug: true }) // 指定你的入口脚本文件
    .transform(babelify, { presets: ['@babel/preset-env'] }) // 在打包过程中转译ES6+语法
    .bundle() // 分析依赖树，打包所有关联模块（包括jQuery）
    .pipe(source('bundle.js')) // 将打包结果转为gulp可处理的文件格式
    .pipe(buffer()) // 转换为buffer，方便后续压缩操作
    .pipe(uglify()) // 可选：如果需要压缩代码就保留，不需要可删除这一行
    .pipe(gulp.dest('./dist')); // 指定最终输出目录
});

gulp.task('default', gulp.series('build-js'));

方案说明 #

• browserify会自动分析你代码里的import/require语句，把所有依赖的模块（包括jQuery）都打包进同一个输出文件，而且依赖代码会优先被加载，相当于你期望的“编译到文件顶部”效果
• babelify作为browserify的插件，负责在打包过程中完成ES6+到ES5的语法转译
• 整个配置比webpack简洁太多，适合你这种只需要基础模块打包+语法转译的场景

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