面试题：JavaScript中Babel基础使用

Question

请描述在一个简单的JavaScript项目中，如何配置Babel以将ES6箭头函数转换为ES5兼容的代码。假设项目使用npm管理依赖，简述主要步骤及相关配置文件的关键内容。

Answer 1

1. 初始化项目：
   • 在项目目录下打开终端，运行 npm init -y 初始化 package.json 文件。这会快速生成一个默认的 package.json，用于管理项目依赖。
2. 安装必要的依赖：
   • 安装 @babel/core，它是Babel的核心编译器，运行 npm install --save -dev @babel/core。
   • 安装 @babel/cli，它允许在命令行中使用Babel，运行 npm install --save -dev @babel/cli。
   • 安装 @babel/preset - env，它可以根据目标环境将现代JavaScript语法转换为向后兼容的版本，运行 npm install --save -dev @babel/preset - env。
3. 创建Babel配置文件：
   • 在项目根目录下创建一个名为 .babelrc 的文件（或者 .babelrc.json，两者效果类似）。如果使用 .babelrc，其内容如下：

{
    "presets": [
        "@babel/preset - env"
    ]
}

• 这里 @babel/preset - env 预设会根据配置（或默认设置）来转换ES6及以上的语法为ES5兼容代码。

4. 使用Babel转换代码：
   • 假设你的项目中有一个 src 目录存放源文件，dist 目录用于存放转换后的文件。可以在 package.json 的 scripts 字段中添加如下脚本：

{
    "scripts": {
        "build": "babel src -d dist"
    }
}

• 这样运行 npm run build 时，Babel会将 src 目录下的文件转换为ES5兼容代码，并输出到 dist 目录。

另外，也可以使用 .babel.config.js 配置文件（更适用于monorepos等复杂项目结构），内容大致如下：

module.exports = function (api) {
    api.cache(true);
    const presets = [
        '@babel/preset - env'
    ];
    return { presets };
};

这里 api.cache(true) 用于启用缓存，提升Babel编译性能。