如何使用Gulp编译含Vue组件标签的JS文件，解决uglify阶段语法报错问题

问题根因 #

当前报错是因为代码中使用了Vue JSX语法，原有Babel配置仅支持ES2015转译，未对JSX做语法转换，未转译的尖括号标签无法被gulp-uglify识别，导致编译失败。

解决步骤 #

1. 安装所需依赖 #

执行以下命令安装Babel Vue JSX转译相关依赖：

# Vue2 项目执行
npm install @babel/core @babel/preset-env @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props gulp-babel@8 --save-dev
# 若gulp-uglify仍报错，可替换为支持ES6+的gulp-terser
npm install gulp-terser --save-dev

2. 调整gulpfile.js配置 #

修改后的任务配置如下：

const babel = require('gulp-babel');
const terser = require('gulp-terser'); // 替换原有的uglify

gulp.task('cover', () => {
  // 新增return保证异步任务执行顺序正确
  return gulp
    .src('./dist/const/**/const.js')
    .pipe(
      babel({
        // 替换老旧的es2015 preset，按需转译语法
        presets: ['@babel/preset-env', '@vue/babel-preset-jsx'],
      })
    )
    .pipe(gulp.dest('./dist/compress'))
    .pipe(
      // 用terser替换uglify，兼容性更好
      terser({
        mangle: true,
        compress: true,
      })
    )
    // dest路径不需要写通配符，直接填写目标根目录即可
    .pipe(gulp.dest('./myProject/'))
})

3. 修正JSX语法错误 #

原代码中JSX部分的插值写法错误，Vue JSX中使用单大括号而非双大括号：

// 原错误写法
// <a onClick={() => {_this.handleDetail(record)}}> {{ text }} </a>
// 修正后写法
<a onClick={() => {_this.handleDetail(record)}}> { text } </a>

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