# @elsa-workflows/elsa-workflows-studio 中文文档

规范地址：https://npmcn.com/package/%40elsa-workflows/elsa-workflows-studio/

版本：2\.16\.1
npm 元数据更新时间：2026-04-17T18:06:23.608Z
中文译文更新时间：2026-11-13T13:53:03.664Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40elsa-workflows/elsa-workflows-studio
原文对照：https://npmcn.com/package/%40elsa-workflows/elsa-workflows-studio/?lang=original
项目主页：https://github.com/elsa-workflows/elsa-core#readme
源码仓库：https://github.com/elsa-workflows/elsa-core

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：55.9 MB，1172 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：27 个
- 首次发布：2021-06-09T12:52:07.429Z
- 最新版本发布：2026-04-17T18:06:23.475Z
- 近 30 天下载量：6286（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：69（近 12 个月 2 个）

## 中文简介

Elsa Workflow Studio是一套网络组件的集合,用于管理存储在Elsa Workflows服务器上的Elsa工作流程.

## 安装

```sh
npm install @elsa-workflows/elsa-workflows-studio
```

也可以使用：`pnpm add @elsa-workflows/elsa-workflows-studio`、`yarn add @elsa-workflows/elsa-workflows-studio`、`bun add @elsa-workflows/elsa-workflows-studio`

## README

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# Stencil 组件启动器

这是一个使用Stencil建立独立网络组件的启动项目.

Stencil对于整个应用程序的建造也非常出色. 这点,请使用 [速记应用程序启动器](https://github.com/ionic-team/stencil-app-starter) 换句话说.

# 斯坦西尔

Stencil是使用Web组件构建快网络应用程序的编译器.

Stencil将最受欢迎的前端框架的最佳概念整合为一个编译时间而不是运行时间工具. Stencil取取TypeScript,JSX,一个微小的虚拟DOM层,高效的单向数据绑定,同步渲染管道(类似于React Fiber),并懒散地从盒子中装入,生成100%基于标准的Web组件,运行在支持自定义元素v1 spec的任何浏览器中.

Stencil组件只是Web组件,所以它们在任何主要框架中工作,或者根本没有任何框架.

## 开始

要开始使用 Stencil 构建一个新的网络组件, 请将此 repo 复制到一个新的目录 :

```bash
git clone https://github.com/ionic-team/stencil-component-starter.git my-component
cd my-component
git remote rm origin
```

运行 :

```bash
npm install
npm start
```

为了建造生产部件,运行:

```bash
npm run build
```

要对组件进行单元测试,请运行:

```bash
npm test
```

需要帮忙吗? 看看我们的医生 [这里](https://stenciljs.com/docs/my-first-component)。 。 。 .

## 命名组件

在创建新组件标记时,我们建议 _没有_ 使用 `stencil` 在组件名称中(前: `<stencil-datepicker>`) (中文(简体) ). 这是因为生成的组件与斯通西尔无关;它只是一个网络组件!

取而代之的是,使用适合您公司或任何名称的前缀来表示一组相关的组件. 例如,所有Ionic生成的网页组件都使用前缀 `ion`。 。 。 .

## 使用此组件

我们建议采用三种战略,使用由Stencil构建的网络组件.

所有这些战略的第一步是: [向国家预防机制公布](https://docs.npmjs.com/getting-started/publishing-npm-packages)。 。 。 .

### 脚本标签

-   设置类似此的脚本标签 `<script src='https://unpkg.com/my-component@0.0.1/dist/my-component.esm.js'></script>` 在索引.html的首页
-   然后可以在模板、JSX、html等中任意使用元素

### 节点模块

-   运行 `npm install my-component --save`
-   设置类似此的脚本标签 `<script src='node_modules/my-component/dist/my-component.esm.js'></script>` 在索引.html的首页
-   然后可以在模板、JSX、html等中任意使用元素

### 在一个启动程序中

-   运行 `npm install my-component --save`
-   添加导入到 npm 包 `import my-component;`
-   然后可以在模板、JSX、html等中任意使用元素

## 常见问题

### @elsa-workflows/elsa-workflows-studio 是什么？

Elsa Workflow Studio是一套网络组件的集合,用于管理存储在Elsa Workflows服务器上的Elsa工作流程\.

### 如何安装 @elsa-workflows/elsa-workflows-studio？

在项目目录运行 npm install @elsa-workflows/elsa-workflows-studio，或使用 pnpm add / yarn add / bun add。

### @elsa-workflows/elsa-workflows-studio 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @elsa-workflows/elsa-workflows-studio 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @elsa-workflows/elsa-workflows-studio 可以商用吗？

@elsa-workflows/elsa-workflows-studio 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @elsa-workflows/elsa-workflows-studio 的下载量有多少？

根据 npm 官方下载统计，@elsa-workflows/elsa-workflows-studio 在 2026/10/14 – 2026/11/12 这 30 天内被下载 6,286 次，日均约 210 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @elsa-workflows/elsa-workflows-studio 还在维护吗？

最新版本 2\.16\.1 发布于 2026/04/18（6 个月前）；至今共发布 69 个版本，其中过去 12 个月发布了 2 个；首次发布于 2021/06/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。