How to use Babel without Webpack

在没有 Webpack 的情况下使用 Babel，你可以直接使用 Babel 的 CLI 或者与其他任务运行器如 Gulp 或 Grunt 结合使用。以下是使用 Babel CLI 的基本步骤：

1. 安装 Node.js 和 npm

确保你的开发环境中已经安装了 Node.js 和 npm。可以在 Node.js 官网下载并安装。

2. 初始化 npm 项目

在项目根目录下，运行以下命令来初始化一个新的 npm 项目（如果你还没有一个 package.json 文件的话）：

bash
npm init -y

3. 安装 Babel

安装 Babel CLI 和 Babel 预设（例如 @babel/preset-env）：

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

4. 配置 Babel

在项目的根目录下创建一个 .babelrc 或者 babel.config.json 文件来配置 Babel。例如：

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

5. 创建一个 Babel 转换脚本

在 package.json 文件中，你可以添加一个 npm 脚本来运行 Babel 并转换你的 JavaScript 文件。例如：

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

这里的 "build" 脚本会将 src 目录下的所有 JavaScript 文件转换为 ES5，并将它们输出到 dist 目录。

6. 运行 Babel

通过以下命令运行刚才创建的脚本来转换你的代码：

bash
npm run build

7. （可选）使用其他工具

如果你需要更多的构建步骤（如代码压缩、拷贝文件等），你可以考虑使用任务运行器如 Gulp 或 Grunt，它们可以和 Babel 配合使用。

8. 在浏览器中使用转换后的代码

确保你的 HTML 文件引用了转换后的 JavaScript 文件。例如，如果你的原始文件是 src/app.js，转换后的文件可能是 dist/app.js。

html
<script src="dist/app.js"></script>

注意：

• 确保在 .babelrc 文件或者 babel.config.json 文件中配置了适合你项目的 Babel 插件和预设。
• 使用 CLI 时，你可能还需要安装额外的 Babel 插件或者预设来支持特定的语言特性。
• 如果你需要对 Node.js 代码进行转换，确保你的 Node.js 版本与你使用的 Babel 插件兼容。

以上步骤将帮助你在没有 Webpack 的情况下使用 Babel 转换你的 JavaScript 代码。