@babel/preset-env 无法在浏览器中直接运行，因其依赖 Node.js 环境的 AST 解析、fs 模块、targets 查询及 browserslist 动态决策能力；浏览器仅能通过 @babel/standalone 使用静态插件列表，不支持按目标环境自动转译和按需注入 polyfill。
为什么直接在 HTML 里用 @babel/preset-env 不行
它根本没机会运行——@babel/preset-env 是一个 Node.js 侧的编译时预设，依赖 @babel/core 和完整 AST 解析能力。浏览器里没有 fs、没有模块解析上下文、也没有 targets 查询能力。你看到的“Babel in-browser”（比如 <script src="https://unpkg.com/@babel/standalone"></script>）只是个阉割版，只支持硬编码插件列表，不支持 targets 或 browserslist 动态决策。
@babel/standalone 能不能模拟 preset-env 的行为
不能。它内置的转换规则是静态打包好的，比如强制启用 transform-arrow-functions、transform-classes 等十几个插件，但：
- 无法读取你的
.browserslistrc或package.json#browserslist - 不识别
targets配置项，传了也忽略 - 不会按需注入
core-jspolyfill，Promise、Array.from这类 API 仍会报错 - 所有转换无差别执行，哪怕目标浏览器（如 Chrome 120）原生支持，也会多此一举
真正能实现“按目标浏览器自动转译”的唯一路径
必须走构建流程，在本地或 CI 中完成转译。关键不是“能不能”，而是“在哪做”：
- 用
babel.config.json（而非.babelrc）声明{"presets": ["@babel/preset-env"]}，确保配置可被工具链正确加载 - 在
package.json中定义"browserslist"字段，例如："browserslist": ["> 1%", "last 2 versions", "not dead"] - 搭配
core-js和useBuiltIns: 'usage'才能按需注入 polyfill（仅当代码中实际调用了Array.from才引入对应模块） - 命令行示例：
npx babel src/index.js --config-file ./babel.config.json --out-file dist/index.js
注意：@babel/preset-env 默认只处理语法（syntax），不处理全局 API；漏掉 useBuiltIns 或 core-js 版本错配（比如用了 core-js@3 却写 import 'core-js/stable' 而非 import 'core-js/stable/array/from'），是线上 Promise 报错最常见原因。
立即学习“前端免费学习笔记（深入）”；
如果非要 HTML 内联调试，有个折中方案
用 Babel Standalone + 手动指定插件，虽不智能但可控：
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel" data-presets="env,stage-3"> const arr = [1, 2, 3]; console.log(arr.map(x => x * 2)); // 箭头函数、map 都会被转 </script>
但你要自己查兼容性表：比如 ?.（可选链）在 Standalone 中需额外加 proposal-optional-chaining，且无法判断是否真需要——IE11 要，Chrome 85 就纯属浪费。
真正按目标环境裁剪的逻辑，只存在于构建阶段的 @babel/preset-env 内部，它会查 caniuse 数据库、算语法差集、决定要不要展开解构、要不要把 async/await 编译成 regeneratorRuntime……这些动作，HTML 加载时早已结束。
