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

返回此错误

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

我在大口吃配置中忘记了什么吗？

Answer 1

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

您正在利用Automatic semicolon insertion的优势，如果您通过AST Explorer运行代码，则会看到links = { ... }()行被解析为 CallExpression < / strong>，在这种情况下为无效，因此您将收到错误消息。

有效 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。

但是，由于未定义变量并且代码在strict mode中运行，因此该代码仍会抛出 ReferenceError 。

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

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

Answer 2

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

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

const { fb, li, tw } = links

我希望这会有所帮助。

Gulp / Babel编译时未正确使用解构分配

2 个答案: