用 babel 转码需手动搭建环境：初始化项目、安装 @babel/cli 和 @babel/preset-env、配置 .babelrc；必须用 npx babel 执行，正确指定输入输出路径，并确保 html 引入 dist 目录下的文件。
用 babel 转，不是插件也不是 vscode 内置功能
VSCode 本身不转码，它只是编辑器。真正干活的是 babel —— 一个命令行工具。网上很多“装个插件点一下就转”的说法，要么过时，要么偷偷调用了 babel，还容易出错。你得自己搭环境，但其实就三步：初始化项目、装包、写配置。
-
npm init -y创建package.json（别跳这步，没它babel不认本地安装） -
npm install --save-dev @babel/cli @babel/preset-env（注意：用@babel/preset-env，不是旧版babel-preset-es2015；新版兼容性更好，也支持按目标浏览器自动降级） - 根目录建
.babelrc，内容必须是：{ "presets": ["@babel/env"] }
npx babel 是最稳的执行方式，别全局装 babel-cli
全局装 babel-cli（npm install -g @babel/cli）看似省事，但项目多了版本一打架，babel --version 显示的可能根本不是当前项目用的版本。直接用 npx babel，它会优先找本地 node_modules 里的 @babel/cli，干净又可靠。
- 转单个文件：
npx babel src/index.js -o dist/index.js - 转整个
src目录（保持结构）：npx babel src -d dist - 边改边转（监听模式）：
npx babel src -w -d dist（保存即重编译，适合调试）
.babelrc 配置写错，转出来还是 es6
常见错误是 .babelrc 文件名写成 babelrc（缺点）、.babelrc.js（不被默认识别），或者内容里 presets 拼错成 presets 或留空。结果就是命令跑成功了，但输出文件和输入一模一样——let、箭头函数全在，浏览器一跑就报错。
- 确认文件名是
.babelrc（开头带点，小写，无扩展名） - 确认
presets数组里至少有一个有效 preset，比如"@babel/env" - 如果要兼容老 IE，加
"targets": {"ie": "11"}到 preset 里，否则默认只降到现代浏览器需要的级别
HTML 中引入的必须是 dist 下的文件，不是 src
很多人写完转码命令，dist 文件夹也生成了，但 HTML 里仍引用 src/index.js，一刷新控制台就报 SyntaxError: Unexpected Token 'const'。这不是转码失败，是引用路径错了。
-
src/放 ES6 源码，只给开发者看 -
dist/放npx babel输出的 ES5 文件，才是给浏览器跑的 - 检查 HTML 的
<script src="dist/index.js"></script>，路径别手抖写成src
转码本身不难，难的是每一步都得对上号：配置文件名、preset 名、命令参数、HTML 引入路径——漏一个，就白忙活。