【问题标题】:Block-scoping in ES6 compiled by babelbabel 编译的 ES6 中的块作用域
【发布时间】:2016-10-01 02:49:36
【问题描述】:

我知道在 es6 中这是如何制作块作用域的。

'use strict';

{
    let account = [1678922, 300450];

    let compute = (credit, debit) => {
        return credit - debit;
    }

    console.log(compute(...account));
}

ES5 [这是我所期望的]

(function(){
    var account = [1678922, 300450];

    var compute = function compute(credit, debit) {
        return credit - debit;
    };

    console.log(compute.apply(undefined, account));
})();

console.log(user1);

BABEL编译

'use strict';

{
    var account = [1678922, 300450];

    var compute = function compute(credit, debit) {
        return credit - debit;
    };

    console.log(compute.apply(undefined, account));
}

我想删除编译版本中的全局变量。

问题:

  1. 有没有什么方法可以不用插件?
  2. 如果没有,是否有使用 npm 的插件?

PS:我需要支持古代浏览器。至少 IE9。

任何帮助将不胜感激。谢谢!

【问题讨论】:

  • 添加“使用严格”;在你的脚本之上?
  • 你能给出一些背景信息吗?我可以想出很多方法来解决这个问题:将其限定为您正在使用的函数,使用对象文字来存储它等等,但这实际上取决于您为什么需要它以及您打算如何使用它。
  • @thesublimeobject,我相信给出的上下文很清楚。为什么块范围没有按预期工作。
  • 您的示例输出不是 Babel 输出的:babeljs.io/repl/… 它不需要函数,因为 Babel 假定文件将是模块,因此模块加载器将负责将每个文件包装在 IIFE 中.
  • @DrEarnest - 不。他在块内用let 声明了变量。那是块作用域,而不是 Javascript ES6+ 中的全局作用域,OP 认为 babel 应该交叉编译为尊重和实现 ES6 中的块作用域的 ES5 代码。

标签: javascript node.js ecmascript-6 babeljs


【解决方案1】:

来自 babel 编译的示例; cmets 的继续:

编辑:基于您的示例

预编译:

{
    let account = [1678922, 300450];

    let compute = (credit, debit) => {
        return credit - debit;
    }

    console.log(compute(...account));
}

{
    let account = [16789, 3004];

    let compute = (credit, debit) => {
        return credit - debit;
    }

    console.log(compute(...account));
}

后编译:

{
    var account = [1678922, 300450];

    var compute = function compute(credit, debit) {
        return credit - debit;
    };

    console.log(compute.apply(undefined, account));
}

{
    var _account = [16789, 3004];

    var _compute = function _compute(credit, debit) {
        return credit - debit;
    };

    console.log(_compute.apply(undefined, _account));
}

本质上,这并不重要。 Babel 正在以一种无关紧要的方式智能地编译它,真的。

【讨论】:

  • 没有。尝试将我的示例放入 babeljs.io。我不知道为什么你会得到不同的结果。我正在使用cli。还有一个,它将可以在其他脚本中访问。想象一下,如果他们可以在控制台中输入 account 或 _account。
  • 我不确定。我正在通过 babel-loader 使用 webpack 进行编译。考虑到它输出的模块范围,鉴于文件本身是通过函数导出的,并且由 webpack 需要和调用,这些变量都不能通过全局范围获得。我想这可能是 webpack 特定的东西,但考虑到函数包装器,我无法在全局范围内访问它们。
  • 正如我上面所说,如果你没有使用 babeljs.io 网站没有的模块捆绑器,那么你只会得到一个全局的。不过,现在每个人都使用打包工具,所以这不是问题。
  • 哦,我明白了。我没有尝试使用模块系统。但我认为在这个项目中。我应该学习它,这是必须的。谢谢你的时间。
猜你喜欢
  • 2016-12-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-06-07
  • 2016-05-03
  • 2017-04-12
  • 1970-01-01
  • 2017-10-08
相关资源
最近更新 更多