如何让Blade中的ES6代码通过Mix转译，兼顾IE11兼容与现代浏览器体验

先给个直接结论：不存在开箱即用的零配置方案，能自动扫描所有Blade模板内的内嵌<script>代码完成Babel转译——因为Blade是服务端渲染模板，不属于前端构建管线的默认扫描范围。但完全不需要从零搭建冗余的公共函数库，现有工具链可以用极低的改造成本覆盖你「同时产出ES6给现代浏览器、ES5给IE11用户」的核心需求，具体落地路径如下：

最低改造成本的推荐方案 #

这个方案完全依托Laravel自带的Vite/Mix构建管线实现，不需要额外写服务端扫描逻辑：

• 第一步：把现在所有Blade里直接写在内联<script>块的ES6代码，拆分到resources/js/inline/目录下的独立JS文件里，比如你示例页面的JS就单独存为resources/js/inline/page.js，保留原来写的ES6语法即可，不需要手动降级成ES5。
• 第二步：在前端构建配置里设置转译目标为IE11兼容版本，同时把inline/目录下的所有JS文件配置为多入口构建。构建工具会自动通过Babel把ES6代码转成兼容IE11的ES5版本，并且自动给现代浏览器产出原生ES6版本的代码。
• 第三步：把Blade模板里原来的内联<script>块，替换成构建工具的资源引入指令，比如用Vite的话直接写@vite('resources/js/inline/page.js')即可，原来Blade里@section('scripts')的结构完全不用调整。

这个方案的核心优势 #

• 不需要写任何自定义的转译逻辑，所有转译工作都由成熟的Babel管线完成，转译准确率有保障，不会出现手写兼容代码的遗漏问题。
• 完全保留了原有Blade的模板结构，不需要调整页面的开发习惯，只是把写在模板里的JS挪到对应的独立文件，学习成本几乎为零。
• 自动实现两类用户的代码分发：通过原生的module/nomodule属性，支持ES6的浏览器加载运行效率更高的原生ES6代码，IE11会自动加载降级后的ES5版本，不需要手动写UA判断逻辑，可靠性比识别浏览器类型的方案高很多，既不会让IE11用户遇到语法报错，也不会让现代浏览器用户加载冗余的ES5降级代码，兼顾兼容性和运行效率。

如果你实在不想拆分内联JS #

如果你就是想保留Blade里直接写内联JS的习惯，不想拆独立文件，也可以通过自定义Laravel中间件实现：

• 全局拦截服务端返回的HTML响应，扫描所有内联的<script>块，把提取出来的JS代码通过Babel预先转成ES5版本做缓存，再替换回原HTML的内联位置。
• 但这个方案的性能开销更高，还要处理内联代码的缓存失效、动态内联内容的转译异常等问题，只适合内联JS逻辑极少的小项目，不推荐作为长期使用的方案。

常见误区澄清 #

• 完全不需要为了这个适配需求专门搭建公共函数库：如果你有重复调用的JS逻辑，本来就应该抽到独立的公共资源文件里做统一转译；如果是单页面独有的业务逻辑，跟着页面走的代码通过上面的多入口构建逻辑处理即可，和公共函数库没有必然联系。
• 千万不要为了适配IE11，把所有JS代码硬写成ES5语法，这样现代浏览器的用户也拿不到原生ES6的运行效率优势，通过构建管线的多目标产出，完全可以同时兼顾两类用户的体验。

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