如果你是前端开发者，你一定知道 npm（Node Package Manager），这个 JavaScript 包管理器有着非常广泛的使用，而 single-spa-ember 就是一个极好的 npm 包，对于使用 Ember.js 开发微服务的开发者来说，这个 npm 包将会极大地提升你的开发效率。在本文中，我们将会为你介绍 single-spa-ember 的使用教程，详细讲解这个 npm 包的使用方式与指南，希望对于开发者们有所帮助。
single-spa-ember 是什么？
single-spa-ember 是一款面向微服务组件化开发的 npm 包。它可以帮助开发者将基于 Ember.js 的应用转变为可在不同的 JavaScript 框架或者 Web 应用上共存的微服务。这意味着，你可以将你的 Ember.js 应用程序集成到其它框架的应用程序中。
single-spa-ember 是一个基于 single-spa 架构的 npm 包，而 single-spa 又是一款非常出色的 JavaScript 微前端框架。通过 single-spa-ember，微服务之间的通信以及微服务应用的生命周期管理都可以得到完美的解决。
使用 single-spa-ember
接下来，我们将为你介绍如何在你的项目中使用 single-spa-ember。
安装
你可以使用 npm 或者 yarn 来安装 single-spa-ember。在终端中执行如下命令即可：
npm i single-spa-ember
或者
yarn add single-spa-ember
条件
使用 single-spa-ember，你需要遵循以下条件：
你的应用程序必须是基于 Ember.js 开发的。
你的应用程序必须使用插件 ember-cli-deploy 来部署至生产环境。
你的应用程序必须使用插件 ember-cli-deploy-s3-index 将你的项目 index.html 部署至 S3。
你的应用程序必须使用插件 ember-cli-deploy-s3 来部署你的应用程序 JavaScript，CSS，以及图片文件至 S3。
你的应用程序必须使用插件 ember-cli-deploy-s3-fastboot 来部署你的 Fastboot 服务至 S3。
配置
single-spa-ember 是基于 single-spa 架构的，使用 single-spa-ember 之前，你需要在你的项目中添加 single-spa 的配置项。在创建一个文件 single-spa-config.js，将如下代码添加进去：
import { registerApplication, start } from 'single-spa';
registerApplication(
'appName',
() => import('appModule'),
location => location.pathname.startsWith('/appName')
);
start();上述代码中：
registerApplication方法是用来注册一个微服务的。'appName'是你的应用的名称，使用一个唯一的名称即可。这个名称用来在其它框架或者 Web 应用中调用你的应用。() => import('appModule')用来加载你的应用，'appModule'是你的应用的包名。location => location.pathname.startsWith('/appName')是用来定义你的应用将要呈现在哪个位置，这里我们以 /appName 的路径来示例。
接下来，你需要调用 single-spa-ember 的 registerEmberApp 方法，将你的 Ember.js 应用程序注册到微服务中。在 single-spa-config.js 文件末尾添加以下代码：
import { registerEmberApp } from 'single-spa-ember';
registerEmberApp('appName', getName());
function getName() {
return window && window.__EMBER_APP_NAME__;
}在上述代码中，registerEmberApp 方法用来注册 Ember.js 应用程序。第一个参数是你的应用程序的名称，应该与你在之前进行 single-spa 的注册名称相同。第二个参数 getName() 是用来返回你的应用程序的名称的。一般地，我们需要在 index.html 文件中包含如下代码：
<script> window.__EMBER_APP_NAME__ = '<appName>'; </script>
这就是为什么在 getName() 函数中我们返回了 window && window.__EMBER_APP_NAME__。
如果你的应用程序中还存在特殊的场景，比如需要使用 Ember 定义全局变量，你可以在 registerEmberApp 方法前调用其他的方法来注册你的应用程序，这些场景也都已经在 single-spa-ember 的官方文档中进行了详细的描述。
最后，在项目根目录 create-single-spa.js 文件末尾添加如下代码：
-- -------------------- ---- -------
----- - ------- - - ------------------------
-------------- - -
-------- -
---------- ------------- -- -
---------------------------------- - ------------------------
---------- -- -
--------------------------------- - ---------
---
------ --------------
-
-
--这段代码主要是为了确保在使用 Webpack 压缩打包你的代码时，不会发生非常紧急的错误。
示例
下面，我们为你提供一个使用 single-spa-ember 的示例：
在终端中执行如下命令：
ember new app-shell cd app-shell ember install ember-cli-deploy ember install ember-cli-deploy-build ember install ember-cli-deploy-s3 ember install ember-cli-deploy-s3-fastboot ember install ember-cli-deploy-s3-index
接着，你要在 index.html 文件中包含以下代码：
<script> window.__EMBER_APP_NAME__ = '<appName>'; </script>
将 <appName> 替换为你自己的应用名称即可。
在 src/single-spa-config.js 文件中添加以下内容：
-- -------------------- ---- ------- ------ - -------------------- ----- - ---- ------------- ------ - ---------------- - ---- ------------------- -------------------- ---------- -- -- -------------------- -------- -- ---------------------------------------- -- --------------------------- ----------- -------- --------- - ------ ------ -- -------------------------- - --------
在 create-single-spa.js 文件中添加以下内容：
-- -------------------- ---- -------
----- - ------- - - ------------------------
-------------- - -
-------- -
---------- ------------- -- -
---------------------------------- - ------------------------
---------- -- -
--------------------------------- - ---------
---
------ --------------
-
-
--在 package.json 文件中添加以下内容：
-- -------------------- ---- ------- ---------- - -------- ------ ------- -------- ------ ------ -- ------------- - ---------- ------- -------------- ------------ -------- --------------------------- ---------------- ------------------------------ -------------- ----- -
执行 npm start 命令后，single-spa 会启动一个内置的开发 Web 服务器，并在 http://localhost:9000 正确显示出来。
希望以上内容能为你使用 npm 包 single-spa-ember 提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573c581e8991b448e9b8f