# @aurodesignsystem/auro-library 中文文档
规范地址：https://npmcn.com/package/%40aurodesignsystem/auro-library/
版本：5\.14\.4
npm 元数据更新时间：2026-10-08T19:14:05.560Z
中文译文更新时间：2026-11-07T05:21:19.212Z
软件包许可：Apache-2\.0
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40aurodesignsystem/auro-library
原文对照：https://npmcn.com/package/%40aurodesignsystem/auro-library/?lang=original
项目主页：https://github.com/AlaskaAirlines/auro-library#readme
源码仓库：https://github.com/AlaskaAirlines/auro-library
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：1.8 MB，76 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：^20\.x \|\| ^22\.x
- 运行依赖：1 个
- 首次发布：2023-07-14T04:38:24.551Z
- 最新版本发布：2026-10-08T19:14:05.169Z
- 近 30 天下载量：29185（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：114（近 12 个月 25 个）
## 中文简介
该存放处拥有Auro设计系统各存放处共用的脚本、公用事业和工作流程.
## 安装
```sh
npm install @aurodesignsystem/auro-library
```
也可以使用：`pnpm add @aurodesignsystem/auro-library`、`yarn add @aurodesignsystem/auro-library`、`bun add @aurodesignsystem/auro-library`
## README
# 奥罗图书馆
该存放处拥有Auro设计系统各存放处共用的脚本、公用事业和工作流程.
## 脚本
### 发布 Surge Demo
这是一个使用 GitHub 动作生成突起演示的自动化工作流程 。 在对公关作任何修改时,将会在公关上添加或更新一个与演示内容相类似的链接:
```md
Surge demo deployment succeeded! 🚀🚀🚀
[Auro Web Component Generator](https://surge.sh/)
```
此工作流程使用文件 `./scripts/config/useBundles.js` 以更新演示 HTML 文件,以使用组件的捆绑版本,从而能够在突起时静态支持它们.
要将这个功能添加到 auro 组件中, 您只需要将以下片段添加到 `publishDemo.yml` 文档中 `./.github/workflows` 目录.
```yml
name: Deploy Demo
on:
pull_request:
branches: [ main ]
jobs:
call-publish-demo-workflow:
uses: AlaskaAirlines/auro-library/.github/workflows/publishDemo.yml@main
secrets:
SURGE_TOKEN: ${{secrets.AURO_SURGE_TOKEN}}
```
> 说明: 这只会在位于“阿拉斯加空行”组织的组件中正常工作,因为依赖于整个 Org 行动的秘密 `AURO_SURGE_TOKEN`。 。 。 .
之后,您将想要确保更新您想要的脚本标签, 在您的捆绑中替换 `./demo/*.html` 带有 `data-demo-scripts="true"` 属性.
```diff
--
++
```
> 注意: 如果您未能做到这一点, 组件将无法在您的演示中注册 .
* * *
### 猛烈降级
这个工作流程可以自动删除并清除任何活动超过2+月的突起演示. 理论上的突起可以让我们有无限数量的活页,但是通过清理未使用和被打磨的演示,我们在未来可以更组织地保存我们的突起账户.
> 说明: 这个工作流程在每月第一个月的月工作上执行.
为了清理我们所有的激增项目 [此 GitHub 动作](https://github.com/marketplace/actions/surge-sh-teardown) 用于处理删除逻辑.
* * *
### 依赖性标签版本
这是用于生成依赖组件标记命名自定义字符串的两部分工具. 这对防止 [版本冲突](https://www.thinktecture.com/en/web-components/web-components-flaws/#elementor-toc__heading-anchor-0) 当一个给定的Auro组件的多版本可能被装入一页时.
_说明: 下面所有代码样本中使用的示例配置假设 `auro-dropdown` 是依赖部分。 根据需要替换示例代码中的任何Auro组件._
#### 第1部分:建筑
##### 配置
1. 创建新文件 `./scripts/version.js` 内容如下:
```js
const versionWriter = require("./versionWriter"); // need to update this with the right path when used from node_modules
versionWriter.writeDepVersionFile('@aurodesignsystem/auro-dropdown'); // duplicate this line for each Auro dependency.
```
2. 在组件中添加以下脚本 `package.json` 文件 :
```json
"build:version": "node scripts/version.js"
```
3. 这个 `build:version` 脚本在 `package.json` 应作为第一个步骤添加 `build` 剧本.
```json
"build": "npm-run-all build:version ... etc.",
```
##### 执行
一旦配置完成, 执行 `npm run build`。必须在此之前完成一次 `npm run dev` 在本地开发时。 当Auro依赖性被初始安装或更新到新版本时 `npm run build:version` 或一个完整 `npm run build` 必须执行.
执行时 `build:version`中定义的 Auro 依赖 `./scripts/version.js` 文件,将创建一个包含已安装的依赖性版本的新JS文件.
例如,遵循这些步骤:
1. 运行 `npm i @aurodesignsystem/auro-dropdown@1.0.0`
2. 添加以下内容: `./scripts/version.js` 脚本文件 :
```js
versionWriter.writeDepVersionFile('@aurodesignsystem/auro-dropdown');
```
3. 运行 `npm run build`
将导致:
- 创建新文件 : `./src/dropdownVersion.js`
- 文件内容将导出已安装组件的版本 。 在这种情况下: `export default '1.0.0'`
#### 第二部分:运行时间
##### 配置
在主要组成部分JS档案中 `./src` 目录添加以下内容:
```js
import { AuroDependencyVersioning } from "../scripts/dependencyTagVersioning.mjs";
import { AuroDropdown } from '@aurodesignsystem/auro-dropdown/src/auro-dropdown.js';
import dropdownVersion from './dropdownVersion';
```
在组件构造器中添加以下内容:
```js
const versioning = new AuroDependencyVersioning();
this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
```
在组件属性中增加以下内容:
```js
/**
* @private
*/
dropdownTag: { type: Object }
```
##### 使用量
新的动态命名版本 `auro-dropdown` 可以在您的组件模板中使用如下:
```js
render() {
return html`
<${this.dropdownTag}>
`;
}
```
当组件在运行期间完成时,DOM现在显示如下:
```html
```
_注意:标签名所附加的数字将匹配所安装的依赖的版本._
##### 使用联署材料访问动态命名元素
动态组件在 JS 查询选择器中使用以下字符串可访问:
```js
this.dropdownTag._$litStatic$
```
```js
firstUpdated() {
this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
};
```
* * *
### 同步所有模板
### 如何运行 `syncAllTemplates.mjs` 脚本
要运行 `syncAllTemplates.mjs` 脚本,您需要将一个新的节点脚本添加到链接的组件中,并将其指向 `syncAllTemplates.mjs` 文档。 您可以通过指向 `syncAllTemplates.mjs` 文件并添加一个 `--github` 参数。 对linter 配置也可以增加一个 `--linters` 参数.
#### 示例调用
```
// Default
"syncTemplates": "./node_modules/@aurodesignsystem/auro-library/scripts/config/syncAllTemplates.mjs"
```
```
// Only sync github workflow templates
"syncTemplates": "./node_modules/@aurodesignsystem/auro-library/scripts/config/syncAllTemplates.mjs --github"
```
```
// Only sync linter configuration templates
"syncTemplates": "./node_modules/@aurodesignsystem/auro-library/scripts/config/syncAllTemplates.mjs --linters"
```
* * *
### 准备构建 api.md
# 如何运行 `generateWcaComponent.mjs` 脚本
要运行 `generateWcaComponent.mjs` 脚本,您需要为您想要用 WCA 处理的组件提供文件路径 。 此脚本只应在项目添加新组件后执行一次 。 在运行剧本时, `.js` 文件将在 `scripts/wca` 文件夹.
## 示例调用
```json
// Common case: 1 component in 1 project
"build:api:prepare": "node ./node_modules/@aurodesignsystem/auro-library/scripts/generateWcaComponent.mjs 'src/auro-flight.js'"
```
```
// multiple components in 1 project
"build:api:prepare": "node ./node_modules/@aurodesignsystem/auro-library/scripts/config/syncAllTemplates.mjs 'src/auro-flight*.js'"
```
* * *
### 向 CEM 字段插件折旧
这个 `deprecatedProseToFieldPlugin` 是一个共享的 [自定义元素外观](https://github.com/open-wc/custom-elements-manifest) 分析器插件。 它提倡在下列文字上写作的淫秽的口语: `@event` 财务报告和审定财务报表 `@slot` 标记输入机器可读 `deprecated` 生成字段 `custom-elements.json`,因此编辑工具可以打击被贬损的事件和插槽.
CEM分析器已经发出一个 `deprecated` 字段,用于属性和明确声明的成员 `@deprecated` JSDoc标签,但它确实 **没有** 对被宣布为内入类的事件和空档这样做 `@event` 编号 : `@slot` 标签。 此插件通过扫描每个声明的 `events` 财务报告和审定财务报表 `slots` 并且,如果说明中包含一个折旧标记(`(Deprecated) …`, (中文(简体) ), `**DEPRECATED** …`或线索 `deprecated` 单词 :
- 套装 `deprecated` 标记和分隔符之后的指南文本(`-`, (中文(简体) ), `:`, (中文(简体) ), `–`,或 `—`——例如, `"Use the \`输入“事件”改为“事件”
- 套装 `deprecated` 改为 `true` 当传教士不作任何引导的时候.
属性和成员被故意置之不理——分析器已经给那些正确标记了. 已携带的条目 `deprecated` 值永远不会被覆盖.
## 使用量
将插件导入您的组件库 `custom-elements-manifest.config.mjs` 并加进 `plugins` 数组 :
```js
import { deprecatedProseToFieldPlugin } from '@aurodesignsystem/auro-library/scripts/build/deprecatedProseToFieldPlugin.mjs';
export default {
globs: ['components/**/src/*.js'],
litelement: true,
plugins: [deprecatedProseToFieldPlugin()]
};
```
重现你的 `custom-elements.json` 现在将用他们的指导信息标记被侵蚀的事件和时间档.
## 常见问题
### @aurodesignsystem/auro-library 是什么？
该存放处拥有Auro设计系统各存放处共用的脚本、公用事业和工作流程\.
### 如何安装 @aurodesignsystem/auro-library？
在项目目录运行 npm install @aurodesignsystem/auro-library，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 generateDocs，可以用 npx generateDocs 直接运行。
### @aurodesignsystem/auro-library 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/aurodesignsystem\_\_auro-library 是否存在。
### @aurodesignsystem/auro-library 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @aurodesignsystem/auro-library 需要什么版本的 Node\.js？
package\.json 的 engines 字段要求 Node\.js ^20\.x \|\| ^22\.x。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。
### @aurodesignsystem/auro-library 可以商用吗？
@aurodesignsystem/auro-library 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。
### @aurodesignsystem/auro-library 的下载量有多少？
根据 npm 官方下载统计，@aurodesignsystem/auro-library 在 2026/10/07 – 2026/11/05 这 30 天内被下载 29,185 次，日均约 973 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @aurodesignsystem/auro-library 还在维护吗？
最新版本 5\.14\.4 发布于 2026/10/09（30 天前）；至今共发布 114 个版本，其中过去 12 个月发布了 25 个；首次发布于 2023/07/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。