前言
随着 Web 应用的复杂性不断增加，前端开发变得越来越艰巨。为了简化前端工程化，npm 包 @buschtoens/ember-engines 应运而生，它为你提供了一种组织大型前端应用的方式。
本文将详细介绍如何使用 @buschtoens/ember-engines，并提供一些示例代码，帮助你快速上手。
@buschtoens/ember-engines 是什么？
@buschtoens/ember-engines 是一种帮助你组织大型前端应用的工具。它能够让你将前端应用分割成多个易于维护的小块，这些小块被称作 engines。
你可以将每个 engine 视为一个独立的子应用，每个 engine 都有自己的模板、路由和组件。这个思路类似于微服务，让你的应用变得更加容易扩展和维护。
安装 @buschtoens/ember-engines
为了使用 @buschtoens/ember-engines，需要先安装它。打开终端并运行如下命令：
npm install --save-dev @buschtoens/ember-engines
这个命令将 @buschtoens/ember-engines 安装到你的项目中，并将它添加到 package.json 文件中。
创建一个 engine
一旦你安装了 @buschtoens/ember-engines，你就可以开始创建 engines 了。使用如下命令来创建一个 engine：
ember generate engine <engine-name>
其中，<engine-name> 就是你要创建的 engine 的名称。
此外，engine 还有可选的 --in 标志，允许你指定该 engine 应该位于哪个文件夹中：
ember generate engine <engine-name> --in=engines
这将创建一个名为 engines 的文件夹，并在其中创建一个名为 <engine-name> 的 engine。
使用一个 engine
现在我们已经创建了一个 engine，可以使用它了。在我们的应用程序中，我们可以使用如下方式来定义 engine 的路由：
-- -------------------- ---- ------- -- ------------- ------ ----------- ---- ------------------------ ------ ------ ---- ----------------------- ----- ------ - -------------------- --------- -------------------- -------- -------------- --- --------------------- - --------------------------- - --- --------------- --- -- --- --- ------ ------- -------
其中，<engine-name> 是你之前创建 engine 时定义的名称。
通过这个方式，我们把 engine 挂到我们的应用程序上，并指定了如何访问它。
此外，我们还可以在我们的应用程序中使用任何 engine 的组件：
{{<engine-name>::engine-component}}其中，engine-component 是 engine 中的一个组件的名称，用于在我们的应用程序中加载 engine 中的组件。
示例代码
以下是一个简单的示例代码，演示如何使用 @buschtoens/ember-engines 创建一个 engine：
创建 engine
使用如下命令创建一个名为 my-engine 的 engine：
ember generate engine my-engine
my-engine 中的组件
在 my-engine 中创建一个名为 my-component 的组件：
-- -------------------- ---- -------
-- ----------------------------------------------
------ --------- ---- -------------------
------ ------ ---- ---------------------------------------
------ ------- ------------------
-------
------------------ -
------------------------- ------------
-
---my-engine 中的模板
在 my-engine 中创建一个名为 my-template 的模板：
{{!-- lib/my-engine/addon/templates/my-template.hbs --}}
<h1>Hello, world! (from my-engine)</h1>
{{my-component}}在应用程序中使用 my-engine
在应用程序的路由文件 app/router.js 中引入 my-engine 的路由：
-- -------------------- ---- ------- -- --------------- ------ ----------- ---- ------------------------ ------ ------ ---- ----------------------- ----- ------ - -------------------- --------- -------------------- -------- -------------- --- --------------------- - ----------------------- - --- ----------- --- --- ------ ------- -------
在我们的应用程序的模板中引入 my-engine 中的组件：
{{my-engine::my-component}}当我们访问应用程序时，应该能够在控制台看到以下日志：
my-component inserted!
同时，我们还应该看到带有“Hello, world! (from my-engine)”字样的页面。
到此为止，我们已经成功地创建了一个 engine 并在应用程序中使用它。
结论
@buschtoens/ember-engines 是一个非常有用的工具，可以帮助我们简化前端工程化，组织复杂的前端应用。本文介绍了如何使用 @buschtoens/ember-engines，并提供了一些示例代码帮助你开始使用它。
通过阅读本文，你应该已经掌握了如何使用 @buschtoens/ember-engines，并且了解了它为我们提供的组织前端应用的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672eb0520b171f02e1e78