BabelJs - 环境设置

BabelJS - 环境设置

为了有效地在你的项目中使用 BabelJS，你需要一个基本的开发环境。本章概述了入门所需的基本工具和步骤。

BabelJS 设置的主要组成部分包括：

Node.js 和 npm (Node 包管理器)
文本编辑器或集成开发环境 (IDE)
Babel 包（按项目安装）

1. Node.js 和 npm

Node.js 是一个 JavaScript 运行时环境，允许你在 Web 浏览器之外运行 JavaScript 代码。npm 是 Node.js 的默认包管理器，用于安装和管理项目依赖，包括 Babel 本身。

检查现有安装

打开你的终端或命令行提示符，输入以下命令检查 Node.js 和 npm 是否已安装：

node -v
npm -v

如果这些命令输出了版本号（例如 Node.js 的 v18.12.1，npm 的 8.19.2），则说明它们已安装。通常建议使用 Node.js 的长期支持 (LTS) 版本以确保稳定性。

安装 Node.js 和 npm

如果 Node.js 和 npm 未安装，或者你需要更新它们：

访问 Node.js 官方网站：https://nodejs.org/
下载对应操作系统的安装程序（Windows、macOS、Linux）。通常最好选择 LTS 版本。
运行安装程序并按照屏幕指示操作。

npm 随 Node.js 安装程序一同提供，因此你无需单独安装它。安装完成后，在新的终端窗口中重新运行 node -v 和 npm -v 进行确认。

或者，你可以使用版本管理器，例如 nvm (Node Version Manager)，来安装和管理系统上的多个 Node.js 版本。对于需要不同 Node.js 版本的开发者来说，这强烈推荐。更多关于 nvm 的信息可以在这里找到：https://github.com/nvm-sh/nvm

2. 文本编辑器或 IDE

你需要一个代码编辑器来编写 JavaScript 和配置文件。开发者中流行的选择包括：

Visual Studio Code (VS Code) - 免费、高度可扩展，提供出色的 JavaScript/TypeScript 支持和集成终端。
WebStorm - 功能强大的商业 IDE，提供用于 Web 开发的高级功能。
Sublime Text - 轻量且快速，可通过插件扩展。
Atom - 免费、开源、可定制。

选择一个你用着顺手且能为 JavaScript 提供良好语法高亮的编辑器。

3. Babel 包（按项目安装）

Babel 本身通常作为依赖安装在每个项目内部，而不是全局安装在你的系统上。这允许不同的项目根据需要使用不同版本的 Babel 及其插件/预设。

你通常会在项目中安装的核心 Babel 包包括：

@babel/core：Babel 的主要引擎。
@babel/cli：用于运行 Babel 的命令行工具（如果你打算直接使用它）。
@babel/preset-env：一个智能预设，允许你根据目标环境使用最新的 JavaScript 特性。

你将在项目目录中使用 npm 安装这些包。例如：

# 进入你的项目目录
cd /path/to/your-project

# 如果是新项目，初始化 npm
npm init -y

# 安装 Babel 包作为开发依赖
npm install --save-dev @babel/core @babel/cli @babel/preset-env

有关项目设置和 Babel 配置的更多详细信息将在后续章节中介绍。

验证你的设置 (概念性)

一旦你安装了 Node.js/npm 和代码编辑器，并将 Babel 包安装到项目中，你的基本环境就已就绪。接下来的步骤包括：

创建使用现代语法的 JavaScript 文件。
配置 Babel（例如，通过 babel.config.json 文件）以指定预设和插件。
运行 Babel（通过 CLI 或构建工具，如 Webpack 或 Gulp）来转译你的代码。

这个基础设置将使你能够遵循本指南其余部分的示例和教程。具体的 Babel 命令和配置将在各自的章节中详细说明。

一个典型的项目结构初步可能如下所示：

your-project/
├── node_modules/     (由 npm install 创建)
├── src/              (你的源 JavaScript 文件)
│   └── index.js
├── package.json      (npm 项目清单文件)
├── package-lock.json (npm 依赖锁定文件)
└── babel.config.json (Babel 配置文件)