Vite2 打包 ES6 代码转 ES5: 详细步骤指南

要将 ES6 代码打包转换为 ES5，您可以使用 Babel 来进行转换。以下是使用 Vite2 打包 ES6 转 ES5 的步骤：

首先，确保您的项目中已经安装了 Vite2。如果还没有安装，可以使用以下命令进行安装：

npm install -g create-vite

在项目的根目录下，使用以下命令初始化 Vite2 项目：

create-vite my-project

cd my-project

安装 Babel 插件和相关依赖：

npm install --save-dev @babel/preset-env @babel/plugin-transform-runtime

创建一个 .babelrc 文件，并添加以下配置：

{
  'presets': ['@babel/preset-env'],
  'plugins': ['@babel/plugin-transform-runtime']
}

在项目的根目录下创建一个 vite.config.js 文件，并添加以下配置：

import { defineConfig } from 'vite'

export default defineConfig({
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  },
  optimizeDeps: {
    include: ['@babel/preset-env']
  }
})

然后，在 src 目录下创建一个 main.js 文件，并编写一些 ES6 代码：

const arr = [1, 2, 3];
const newArr = arr.map((item) => item * 2);
console.log(newArr);

打开 package.json 文件，并修改 scripts 部分，添加一个 build 命令：

{
  'scripts': {
    'build': 'vite build'
  }
}

最后，使用以下命令进行打包：

npm run build

打包完成后，您将在 dist 目录下找到转换后的 ES5 代码。

请注意，上述步骤仅适用于 Vite2 项目。如果您使用的是其他构建工具，可以相应地调整配置。