如何在Yii2 Asset Bundles中自动编译ES6为ES5适配IE11？

嘿，我正好处理过类似的Yii2 + IE11兼容场景，其实Babel完全可以和Yii2集成，不用放弃它！下面给你几个实操性强的方案，帮你自动把ES6代码转成IE11能识别的ES5，不用手动重写：

一、最推荐：Babel CLI + Yii2 AssetBundle #

这是最直接的方式，不需要复杂的前端构建工具，适合中小型项目：

1. 安装Babel依赖
   在项目根目录执行npm命令：

   npm install @babel/core @babel/cli @babel/preset-env core-js@3 --save-dev
   

2. 配置Babel规则
   在项目根目录创建.babelrc文件，指定IE11为目标环境，并启用polyfill（处理ES6内置API兼容）：

   {
     "presets": [
       ["@babel/preset-env", {
         "targets": {
           "ie": "11"
         },
         "useBuiltIns": "usage",
         "corejs": 3
       }]
     ]
   }
   

3. 添加构建脚本
   在package.json里添加编译命令，把你的ES6源码目录转成ES5输出目录：

   "scripts": {
     "build:js": "babel ./web/js/es6 --out-dir ./web/js/es5"
   }
   

   你可以根据自己的文件结构调整路径。

4. 用Yii2 AssetBundle加载编译后的代码
   创建一个自定义的AssetBundle类，指向编译后的ES5文件：

   <?php
   namespace app\assets;
   
   use yii\web\AssetBundle;
   
   class Es5Asset extends AssetBundle
   {
       public $basePath = '@webroot';
       public $baseUrl = '@web';
       public $js = [
           'js/es5/main.js', // 替换成你的编译后文件名
       ];
   }
   

   然后在视图里注册这个Bundle：\app\assets\Es5Asset::register($this);

二、更灵活：Webpack + Babel + Yii2 AssetBundle #

如果你的项目有复杂的前端依赖（比如Vue、React），或者需要代码分割、压缩，推荐用Webpack配合Babel：

1. 安装Webpack和Babel loader

   npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env core-js@3 --save-dev
   

2. 配置Webpack
   创建webpack.config.js，指定入口文件、babel-loader规则和输出目录：

   const path = require('path');
   
   module.exports = {
     entry: './web/js/es6/main.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'web/js/es5'),
     },
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: [
                 ['@babel/preset-env', {
                   targets: { ie: '11' },
                   useBuiltIns: 'usage',
                   corejs: 3
                 }]
               ]
             }
           }
         }
       ]
     }
   };
   

3. 构建并通过AssetBundle加载
   添加Webpack构建脚本到package.json："build:webpack": "webpack --mode production"，运行后生成bundle.js，再用上面的AssetBundle方式加载即可。

三、有没有现成的Yii2插件？ #

目前Yii2官方没有专门的Babel集成扩展，但社区有一些第三方扩展（比如yii2-babel-asset），不过这类扩展更新可能不及时，不如自己配置Babel+构建工具灵活可靠——毕竟Babel本身是前端生态的标准工具，适配性更强。

关键注意点 #

• Polyfill不能少：IE11不支持很多ES6内置API（比如Promise、Array.prototype.find），所以一定要在Babel配置里启用useBuiltIns: 'usage'和corejs，它会自动给需要的代码添加polyfill。
• 处理第三方依赖：如果你的项目用了第三方ES6库，也要确保它们被Babel处理（或者选择支持ES5的版本）。
• 自动构建：可以配合Git Hooks或者CI/CD流程，每次提交代码自动运行Babel/Webpack构建，避免忘记编译。

这样一来，你就不用手动重写任何ES6代码，完全可以通过工具链自动完成转换，完美适配IE11用户~

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