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

返回此错误

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

我是不是在吞咽配置时忘记了什么？

Answer 1

TL；DR:在声明links之后添加一个分号，并声明要销毁的变量。

您正在利用自动分号插入，如果您通过AST资源管理器运行代码，您将看到您的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)
*/

如果添加分号，您将看到{ ... }被正确解析为ObjectExpression。

但是，由于变量未定义且代码在严格模式下运行，此代码仍将抛出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

我希望这能有所帮助。