使用Gulp+Babel编译JS时解构赋值异常，配置是否存在遗漏？

问题重现 #

你遇到的问题是解构赋值被Babel错误编译，导致运行时抛出Cannot read property 'fb' of undefined错误。你的相关代码和配置如下：

Gulp配置代码 #

gulp.task('js', function () {
  return gulp.src(myFiles)
    .pipe(babel({
      presets: ['@babel/env'],
      plugins: ["@babel/plugin-proposal-class-properties"],
    }))
    .pipe(concat('app.min.js'))
    .pipe(gulp.dest('dist'));
})

待编译的JavaScript代码 #

const links = {
  fb: `../../dist/img/facebook.png`,
  li: `../../dist/img/linkedin.png`,
  tw: `../../dist/img/twitter.png`,
}
({ fb, li, tw } = links);

错误的编译输出 #

var links = {
  fb: "../../dist/img/facebook.png",
  li: "../../dist/img/linkedin.png",
  tw: "../../dist/img/twitter.png"
}((_links = links, fb = _links.fb, li = _links.li, tw = _links.tw, _links));

错误原因 #

这个问题本质是JavaScript自动分号插入(ASI)的歧义问题，加上Babel解析时的处理偏差：

• 你的const links = {...}声明末尾没有加分号，JavaScript引擎会尝试把下一行的({ fb, li, tw } = links)当作函数调用参数，解析成const links = {...}({ fb, li, tw } = links)
• Babel编译时错误地将这个歧义语法转换为了对象调用表达式，此时links还未完成赋值，导致_links = links中的links为undefined，进而抛出读取fb属性的错误

解决方案 #

方案1：修复源码的分号缺失（最简单有效） #

在对象声明的末尾添加分号，直接消除语法歧义：

const links = {
  fb: `../../dist/img/facebook.png`,
  li: `../../dist/img/linkedin.png`,
  tw: `../../dist/img/twitter.png`,
}; // 这里添加分号
({ fb, li, tw } = links);

方案2：确保Babel配置完整（补充依赖+优化配置） #

如果你的项目依赖的目标环境不支持解构赋值，需要确保Babel的预设和插件完整：

1. 确认安装了所有必要的依赖包：

npm install @babel/core @babel/preset-env @babel/plugin-proposal-class-properties gulp-babel --save-dev

2. 可以在Babel配置中显式添加解构插件（虽然@babel/env默认会根据目标环境自动引入，但显式添加可以避免环境检测的潜在问题）：

gulp.task('js', function () {
  return gulp.src(myFiles)
    .pipe(babel({
      presets: ['@babel/env'],
      plugins: [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-destructuring" // 显式添加解构插件
      ],
    }))
    .pipe(concat('app.min.js'))
    .pipe(gulp.dest('dist'));
})

验证效果 #

修复后重新编译，正确的输出应该类似：

var links = {
  fb: "../../dist/img/facebook.png",
  li: "../../dist/img/linkedin.png",
  tw: "../../dist/img/twitter.png"
};
var _links = links, fb = _links.fb, li = _links.li, tw = _links.tw;

此时运行代码就不会再抛出错误了。

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