#秋日生活打卡季#

现代 Web 开发通常涉及许多重复性任务，从设置模板代码到管理项目依赖项。对于使用 Ember.js 的开发人员来说，Ember CLI（命令行界面）是一种强大的工具，旨在简化和加速开发过程。Ember CLI 不仅可以自动化许多与 Web 开发相关的繁琐任务，还可以强制执行最佳实践，使构建可维护且可扩展的应用程序变得更加容易。

在这篇全面的指南中，我们将探讨 Ember CLI 的各种功能、如何有效使用它，以及如何通过一些技巧使您的开发更快、更高效。

1. 什么是 Ember.js CLI？

Ember CLI 是 Ember.js 的命令行界面，旨在让您的开发过程更快、更高效。它帮助自动化重复性任务、基于最佳实践生成文件，并无缝管理构建和部署过程。Ember CLI 是 Ember.js 生态系统的重要组成部分，提供了一套简化 Web 应用程序开发的工具。

使用 Ember CLI，您可以：

• 生成模板代码：通过简单的命令创建路由、组件、服务等。
• 运行开发服务器：快速启动服务器以实时查看您的应用程序。
• 管理依赖项：使用 npm 或 yarn 安装和管理第三方库和 Ember 插件。
• 优化构建：自动优化您的应用程序以用于生产，包括压缩和代码摇树优化等功能。
• 运行自动化测试：通过最少的配置设置和执行单元、集成和验收测试。

总的来说，Ember CLI 让您专注于编写代码，而它则处理构建 Web 应用程序时所需的许多重复性任务。

2. 安装 Ember CLI

在使用 Ember CLI 之前，您需要在计算机上全局安装它。Ember CLI 需要 Node.js 和 npm（Node 包管理器）来运行。如果您还没有安装这些，请从 此处 下载并安装 Node.js，默认情况下它会同时安装 npm。

安装 Node.js 和 npm 后，打开终端并运行以下命令以全局安装 Ember CLI：

npm install -g ember-cli

安装完成后，运行以下命令验证 Ember CLI 是否正确安装：

ember -v

该命令应显示 Ember CLI 版本及其他详细信息，如您的 Node.js 版本。

3. 创建一个新的 Ember.js 项目

使用 Ember CLI 创建一个新的 Ember.js 项目非常简单。要创建一个新项目，请导航到您希望项目所在的目录，并运行以下命令：

ember new my-app

该命令会执行以下操作：

• 创建一个名为 my-app 的新目录。
• 在该目录中初始化一个新的 Ember 项目。
• 安装所有必要的依赖项。
• 设置初始文件结构和配置。

项目创建完成后，进入项目目录：

cd my-app

现在，您已经准备好开始构建您的 Ember 应用程序了！

4. Ember CLI 的关键功能

Ember CLI 提供了多个功能，使您的开发过程更快、更高效。让我们更详细地了解这些功能。

文件生成

Ember CLI 的一个突出功能是通过简单的命令生成模板代码。您可以使用 Ember CLI 的生成器来搭建所需的组件、路由、服务等，而不必手动创建文件和目录。

例如，要生成一个新的 组件，运行：

ember generate component my-component

此命令会创建以下文件：

• app/components/my-component.js（JavaScript 逻辑）
• app/templates/components/my-component.hbs（Handlebars 模板）

您还可以生成路由、服务、模型和应用程序中的其他重要部分：

ember generate route posts
ember generate service data-fetcher
ember generate model post

这些命令会创建相应的文件，并包含模板代码，节省您的时间并确保项目的一致性。

开发服务器

在开发过程中，您可能希望查看应用程序在浏览器中的表现。Ember CLI 包含一个内置开发服务器，允许您在本地运行应用程序。要启动开发服务器，请运行：

ember serve

该命令将启动服务器，并使您的应用程序可通过 http://localhost:4200 访问。开发服务器会监视您的文件变化，这意味着每当您对代码进行更改时，应用程序会自动在浏览器中重新加载。

实时重载

为了使开发更快，Ember CLI 包含实时重载功能。当您对代码进行更改时，该功能会自动刷新浏览器。无论您是在更新 JavaScript、Handlebars 模板，还是 CSS，应用程序都会立即重新加载，让您实时查看更改。

实时重载通过消除手动刷新浏览器的需求，大大加快了开发过程。

构建系统

Ember CLI 中的构建系统负责编译、打包和优化您的资源。当您运行 ember serve 或为生产构建项目时，Ember CLI 会编译您的 JavaScript、Handlebars 模板和样式表。它还负责打包第三方库并确保您的应用程序已针对性能进行了优化。

通过自动化构建过程，Ember CLI 让您无需手动配置复杂的构建工具，如 Webpack 或 Gulp。

插件管理

Ember 拥有丰富的插件生态系统，这些插件是扩展应用程序功能的可重用包。Ember CLI 使得安装和管理这些插件变得非常简单。

例如，要向项目添加插件，只需运行：

ember install ember-bootstrap

该命令会安装 ember-bootstrap 插件，将 Bootstrap 组件引入到您的 Ember 应用中。插件范围广泛，从 UI 库到实用程序包，它们通过 Ember CLI 无缝集成到您的项目中。

5. 使用 Ember CLI 管理依赖项

使用 Ember CLI 的一个优势是它与 npm（或 yarn）紧密配合，管理您的项目依赖项。当您创建一个新的 Ember 应用时，会生成一个 package.json 文件，该文件列出了您的应用运行所需的所有依赖项。

您可以使用 npm 添加新的依赖项：

npm install lodash --save

或者，如果您更喜欢使用 yarn：

yarn add lodash

Ember CLI 还可以帮助管理开发依赖项，这些是开发期间使用的工具，如 linter 和测试框架，但在生产环境中不需要。要添加开发依赖项，请使用 --save-dev 标志：

npm install eslint --save-dev

通过 Ember CLI 管理依赖项，确保您的项目保持组织有序，并且所有必要的包都已正确安装和跟踪。

6. 使用 Ember CLI 自动化测试

测试是开发健壮应用程序的重要部分，Ember CLI 使编写和运行测试变得简单。默认情况下，Ember CLI 使用 QUnit 设置测试框架，不过您可以根据需要配置它以使用其他测试库。

生成测试文件

当您使用 Ember CLI 生成路由、组件或服务时，它会自动生成相应的测试文件。例如，当您生成一个组件时：

ember generate component my-component

以下测试文件也会被创建：

tests/integration/components/my-component-test.js

该文件包含模板测试用例，您可以在无需额外设置的情况下开始编写测试。

运行测试

Ember CLI 提供了一个简单的命令来运行您的测试：

ember test

此命令将运行项目中的所有单元测试、集成测试和验收测试。如果您希望在监视模式下运行测试（在您进行更改时重新运行测试），请使用：

ember test --server

通过自动化测试文件的创建和执行，Ember CLI 确保您可以轻松维护代码库的高质量。

7. 为生产环境优化

一旦您的应用准备好部署，Ember CLI 可以通过一个简单的命令帮助您优化生产环境的资源：

ember build --environment=production

此命令执行若干优化任务，包括：

• 压缩：通过删除多余的字符（如空白）减少 JavaScript、CSS 和 HTML 文件的大小。
• 摇树优化：移除未使用的代码，减少打包的资源量。
• 代码拆分：按需加载模块，从而优化页面加载时间。

生产构建生成的文件位于 dist/ 目录中，您可以将它们部署到服务器或 CDN。Ember CLI 使生产优化变得简单，确保您的应用在用户端表现出色。

8. Ember CLI 的高级用法

虽然上述功能已经非常强大，但 Ember CLI 还提供了更高级的工具和技巧，以进一步增强您的开发过程。

使用蓝图

蓝图是用于生成代码模板的强大工具。您可以创建自定义蓝图，以便快速生成特定类型的文件或配置。例如，您可以为团队的每个项目创建一个标准化的组件蓝图，确保一致性。

创建自定义蓝图的基础命令是：

ember generate blueprint my-blueprint

然后，您可以编辑生成的文件，定义该蓝图应生成的代码模板。

管理配置文件

Ember CLI 项目包含多个配置文件，如 config/environment.js，用于不同环境（如开发、测试和生产）的配置。通过这些文件，您可以根据运行环境设置不同的 API 端点、启用或禁用功能，或调整应用行为。

这些配置文件使得在多个环境中维护应用程序变得容易，并确保您可以根据需要灵活调整应用设置。

创建自定义命令

Ember CLI 允许您编写自定义命令来自动化特定任务。这些命令可用作您自己或团队日常工作的一部分。例如，您可以创建一个命令来清理日志文件或执行特定的构建任务。

要创建自定义命令，首先生成一个命令蓝图：

ember generate command clean-logs

然后编辑生成的命令文件，定义该命令应执行的任务。通过自定义命令，您可以进一步增强 Ember CLI 的功能，满足特定需求。

9. 结论

Ember CLI 是一个非常强大的工具，极大地简化了 Web 应用程序的开发、构建和部署过程。通过自动化重复性任务、强制执行最佳实践以及提供许多开箱即用的功能，Ember CLI 能够显著提高您的生产力。

无论您是刚开始使用 Ember.js 还是经验丰富的开发人员，充分利用 Ember CLI 的功能和技巧都能让您的开发体验更加高效。现在，您可以开始使用 Ember CLI 来加速您的开发，构建更快、更可靠的 Web 应用程序。