面试题：Webpack与Babel集成时如何处理ES7/8新特性转译

Question

在已经实现ES6转译的Webpack项目基础上，若要支持ES7的装饰器（Decorators）和ES8的异步迭代器（Async Iterators）等新特性的转译，需要额外做哪些配置和处理？请详细说明。

Answer 1

1. 安装必要的依赖：
   • 对于ES7装饰器，需要安装@babel/plugin-proposal-decorators。对于ES8异步迭代器，需要安装@babel/plugin-proposal-async-iteration。可以通过npm或yarn安装，例如：

   npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-async-iteration
   

2. 配置Babel：
   • 在项目根目录下找到.babelrc文件（如果没有则创建一个）。在.babelrc中添加如下配置：

   {
       "plugins": [
           ["@babel/plugin-proposal-decorators", { "legacy": true }],
           "@babel/plugin-proposal-async-iteration"
       ]
   }
   

   • legacy: true选项是为了让装饰器以旧的行为模式工作，这与当前阶段装饰器的标准行为兼容。
3. Webpack配置调整（如果必要）：
   • 如果Webpack已经配置好了Babel-loader，确保其能正常读取.babelrc配置。一般来说，Webpack的module.rules中关于Babel-loader的配置类似如下：

   module.exports = {
       module: {
           rules: [
               {
                   test: /\.js$/,
                   exclude: /node_modules/,
                   use: {
                       loader: 'babel-loader'
                   }
               }
           ]
       }
   };
   

   • 这样配置后，Webpack在构建过程中，Babel-loader会根据.babelrc中的配置，对ES7装饰器和ES8异步迭代器进行转译。