CodeSandbox中VanillaJS模板为何未触发预期ES6 ReferenceError？

原因分析 #

CodeSandbox的VanillaJS模板默认会用Babel把ES6+代码转成ES5兼容代码。let/const会被转成var，而var只有变量提升，没有ES6里let/const的**暂时性死区（TDZ）**特性——也就是在变量声明前访问不会报错，只会返回undefined，这就是实际结果和预期不符的核心原因：

• 第一段代码转译后等同于：

  console.log(x);
  var x = 5;
  

  var x会被变量提升，此时x已被声明但还没赋值，所以输出undefined。

• 第二段代码转译后等同于：

  var x = 5;
  (function(){
     console.log(x);
      var x = 6;
  })();
  

  函数内部的var x会变量提升，遮蔽了外部的x，此时内部的x还没赋值，所以输出undefined。

触发预期报错的方法 #

要让代码遵循ES6+规范，触发暂时性死区的ReferenceError，可以用以下两种方式：

• 关闭Babel转译：在CodeSandbox的项目设置里找到Babel相关选项，禁用转译功能，让代码以原生ES6+方式运行。
• 切换为ES模块模式：修改项目里的index.html，把引入脚本的标签改成<script type="module" src="index.js"></script>。模块模式下会严格执行ES6+规则，保留let/const的暂时性死区特性，此时在声明前访问变量就会抛出ReferenceError。

内容的提问来源于stack exchange，提问作者Geindzo