当 Gulp/Babel 编译时，它没有正确使用解构赋值

Question

当我使用 Gulp/Babel 编译我的 JS 时，它不使用解构赋值。

我的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'));
})

我的代码

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));

Returns这个错误

app.min.js?ver=5.2.2:14 Uncaught TypeError: Cannot read property 'fb' of undefined

我是不是在我的 gulp 配置中忘记了什么？

Answer 1

您的代码无效。也许你想要这样的东西：

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

const { fb, li, tw } = links

希望对您有所帮助。

Answer 2

TL;DR: 在声明 links 后添加一个分号，并声明要解构的变量。

您正在利用 Automatic semicolon insertion, and if you run your code through an AST Explorer，您会看到 links = { ... }() 行被解析为 CallExpression，即 在这种情况下无效，因此您收到错误。

有效 CallExpression 的示例可能是：

var a = function(v) { return v }(1); // a === 1

/**
 * Parsed as:
 *
 * VariableDeclaration  VariableDeclarator  CallExpression
 * |                    |                   |
 * v                    v                   v
 * var                  a =                 function(v) { return v }(1)
 */

如果添加分号，您会看到 { ... } gets parsed correctly as an ObjectExpression.

但是，由于变量未定义且代码为运行，此代码仍将抛出 ReferenceError在 strict mode.

这与此代码引发错误的原因相同：

"use strict";

var obj = { hello: "world" };
hello = obj.hello; // throws a ReferenceError

所以你需要定义变量，我猜是用另一个 const 声明。

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

const { fb, li, tw } = links;

当 Gulp/Babel 编译时，它没有正确使用解构赋值

When Gulp/Babel compiles it doesn't use properly destructuring assignment

gulp

babeljs

ecmascript-2016