如何用 babel 转译*表达式*？答案

【问题标题】：How do I transpile an *expression* with babel?如何用 babel 转译*表达式*？
【发布时间】：2017-01-05 19:28:54
【问题描述】：

鉴于以下情况：

require('babel-core').transform('3').code

有没有办法让它返回3（一个表达式）而不是3;（一个语句）？

我试过了：

在网络和各种网站上搜索“babel 表达式”、“babel 转译表达式”等。
传递(3)，但也转换为3;。
戳 babel 的内部结构以弄清楚发生了什么，但我不太了解它是如何解决这个问题的。
传递选项minified: true，它声称删除尾随分号，但实际上似乎没有做任何事情。

现在我正在使用.replace(/;$/, '')，它有效但看起来很荒谬且容易出错。

【问题讨论】：

如果你传入一个必须转换成多个语句的表达式怎么办？ Babel 不提供您所寻找的保证。另外，如果没有表达式周围文件的完整上下文，Babel 无法处理范围，例如确保它不会生成表达式周围已经在使用的变量名。
@loganfsmyth 什么样的表达式会被转换成语句？我怎么也想不出来。此外，这是否也会导致问题，例如将变量设置为表达式值的程序？我不需要担心范围，因为这些是独立的表达式，它们没有任何上下文。
如果您使用({x: {y, z}} = foo) 会怎样？目前需要一个临时变量来存储foo.x，以便将变量声明拆分出来。例如var _tmp; _tmp = foo.x; y = _tmp.y; z = _tmp.z;。如果需要，可以将赋值放在一个表达式中，但变量声明需要分开。
我想它可以添加一个包装器 IIFE，但在运行时会非常昂贵。
@loganfsmyth IIFE 是显而易见的答案，但它也可以编译为(_foo = foo, _foo$x = _foo.x, y = _foo$x.y, z = _foo$x.z, _foo)——如果你将它用作表达式，这实际上就是 babel 所做的。 (repl demo)

标签： babeljs

【解决方案1】：

@loganfsmyth 提供了BabelJS.slack 上的缺失链接——parserOpts.allowReturnOutsideFunction。这是我想出的代码：

const babel = require('babel-core');

let script = 'return ((selector, callback) => Array.prototype.map.call(document.querySelectorAll(selector), callback))("#main table a.companylist",a => a.innerText)';

let transform = babel.transform(script, {
    ast: false,
    code: true,
    comments: false,
    compact: true,
    minified: true,
    presets: [
        ['env', {
            targets: {
                browsers: ['> 1%', 'last 2 Firefox versions', 'last 2 Chrome versions', 'last 2 Edge versions', 'last 2 Safari versions', 'Firefox ESR', 'IE >= 8'],
            }
        }]
    ],
    parserOpts: {
        allowReturnOutsideFunction: true,
    }
});

let code = `return function(){${transform.code}}()`;

输出：

return function(){"use strict";return function(selector,callback){return Array.prototype.map.call(document.querySelectorAll(selector),callback)}("#main table a.companylist",function(a){return a.innerText});}()

我的输入脚本看起来有点滑稽，只是因为我生成它的方式，但你可以看到它把那些箭头表达式转换为常规函数，整个东西仍然是一个表达式。

注意您可能希望将最后一行修改为类似

let code = `(function(){${transform.code}})()`;

取决于您的需求。我需要我的 returned。

【讨论】：