# 主题组件/插件（JS）常用导入列表

**URL:** <https://meta.discourse.org/t/common-list-of-imports-for-theme-components-plugins-js/382493>\
**Category:** Developers\
**Created:** [2025年九月13日 03:13 UTC](https://meta.discourse.org/t/common-list-of-imports-for-theme-components-plugins-js/382493 "2025-09-13T03:13:05Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [2025年九月13日 03:13 UTC](https://meta.discourse.org/t/common-list-of-imports-for-theme-components-plugins-js/382493/1 "2025-09-13T03:13:05Z")

</div>

在创建 Theme 组件时，我通常需要四处翻找各种依赖的导入语句，所以我决定把它们整理汇总，放在这里。

## Ember 相关

| 名称 | 导入 | 用法 |
| --- | --- | --- |
| Component | `import Component from "@glimmer/component";` | `export default class MyComponentClass extends Component {}` |
| Action 装饰器 | `import { action } from "@ember/object";` | `@action` |
| Tracked 装饰器 | `import { tracked } from "@glimmer/tracking";` | `@tracked myTrackedVar` |
| Service 装饰器 | `import { service } from "@ember/service";` | `@service modal` |
| (Glimmer 模板) on | `import { on } from "@ember/modifier";` | `<p {{on "click" this.someAction}}>点击我！</p>`\[1\] |

## Discourse 相关

| 名称 | 导入 | 用法 |
| --- | --- | --- |
| apiInitializer | `import { apiInitializer } from "discourse/lib/api";` | `export default apiInitializer((api) => {})` |
| withPluginApi | `import { withPluginApi } from "discourse/lib/plugin-api";` | `withPluginApi((api) => {})`\[2\]\[3\] |
| ConditionalLoadingSpinner | `import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";` | `<ConditionalLoadingSpinner @condition={{this.loading}} />` |
| DButton | `import DButton from "discourse/ui-kit/d-button";` | `<DButton @icon="..." @action={{this.someAction}} />` |
| ajax | `import { ajax } from "discourse/lib/ajax";` | `ajax("/path/here")`\[4\] |
| i18n | `import { i18n } from "discourse-i18n";` | `{{i18n "locale_key"}}`\[5\] |
| (Glimmer 模板) 等于、不等于、大于、大于等于、小于、小于等于、或、非、与、拥有、包含 | `import { eq, and, ... } from "truth-helpers";` | `{{#if (eq this.something this.something2)}}`\[6\] |

你可能会看到它们被组合使用，例如将 tracked 变量用作 `ConditionalLoadingSpinner` 的条件，或者将 action 用于 `DButton` 等。

希望这能帮到你！

我不是专家，如果你发现任何不准确的地方，请帮忙纠正或提出，谢谢 🙂。

* * *

1. 你也可以使用 `input`、`mousedown`、`focusin` 等事件 

2. 参见 [discourse/app/assets/javascripts/discourse/app/instance-initializers/enable-emoji.js at 99ace1be120b928f6c694d0118959d745cc4bdbe · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/99ace1be120b928f6c694d0118959d745cc4bdbe/app/assets/javascripts/discourse/app/instance-initializers/enable-emoji.js#L14) 

3. 我认为建议改用 `apiInitializer`；我觉得这是旧版本？ 

4. 功能类似于 `fetch()`。请将其放在 `async` 函数中，并使用 `await` 关键字。 

5. 如果你从核心仓库获取语言包，例如 user.summary.stats 

6. 像 `and` 和 `or` 这样的助手可以接受两个以上的参数

---

_[View the full topic](https://meta.discourse.org/t/common-list-of-imports-for-theme-components-plugins-js/382493)._