JS const编译为浏览器兼容代码后为何只读？Babel编译var后无法重赋值解惑

这个问题的核心在于搞清楚Babel做了两件关键事——语法转换和静态代码检查，你看到的报错其实来自编译阶段的检查，而非浏览器运行var代码时的行为。我来一步步拆解：

• 为什么const会被转成var？
  早期浏览器（或一些低版本JS环境）不支持ES6的const关键字，Babel的核心任务是把ES6+代码转成兼容ES5的代码。因为ES5里没有const，所以Babel会用var替代，同时加上"use strict"开启严格模式——严格模式是ES5的特性，能带来更严谨的语法约束，但它本身不会阻止var变量的重新赋值。

• 为什么重新赋值会报错？
  这不是转成的var变量有什么特殊限制，而是Babel在编译过程中会对const声明的变量做静态代码分析。当它检测到你尝试给一个声明为const的变量重新赋值时（比如x = {}），会直接在编译阶段抛出错误，根本不会把这行非法的赋值代码转成ES5代码让浏览器运行。也就是说，你看到的错误是Babel给你的语法提示，不是浏览器运行时的错误。

  举个对比：如果你手动写var x = ['item']; x = {};，即使在严格模式下，浏览器运行时也不会报错；但如果你用const声明x后写x = {}，Babel会直接拦截这个操作，连编译后的代码都不会生成给你。

• 补充：const的本质是什么？
  别忘了const的“只读”是指变量与值的绑定关系不能改变——你不能让x指向另一个对象、数组或原始值，但你可以修改x指向的数组/对象的内容。比如：

  const x = ['item'];
  x.push('new item'); // 完全合法，Babel不会报错，编译后也能正常运行
  

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