# @biggive/components 中文文档 规范地址：https://npmcn.com/package/%40biggive/components/ 版本：202611061308\.0\.0 npm 元数据更新时间：2026-11-06T13:12:30.403Z 中文译文更新时间：2026-11-08T02:27:16.643Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40biggive/components 原文对照：https://npmcn.com/package/%40biggive/components/?lang=original 项目主页：https://github.com/thebiggive/components#readme 源码仓库：https://github.com/thebiggive/components ## 关键信息（来自 npm 元数据） - 包体积（解压后）：11 MB，679 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>=24\.18 - 运行依赖：8 个 - 首次发布：2022-07-26T20:00:08.644Z - 最新版本发布：2026-11-06T13:12:30.221Z - 近 30 天下载量：2592（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：675（近 12 个月 93 个） ## 中文简介 大赠出组件 ## 安装 ```sh npm install @biggive/components ``` 也可以使用：`pnpm add @biggive/components`、`yarn add @biggive/components`、`bun add @biggive/components` ## 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) # 大给力 StencilJS 网络组件 这个项目是根据来自 [https://stenciljs.com/docs/getting-started (中文(简体) )](https://stenciljs.com/docs/getting-started) ## 设置和构建 ### 从 github 获取最新版本的代码库 ```bash git clone https://github.com/thebiggive/components.git cd components ``` ### 安装套件定义的 StencilJS 依赖性. json 设定 `FONTAWESOME_NPM_AUTH_TOKEN` 在您的环境中可以安装职业软件包,以及: ```bash npm install npm start ``` ### 运行测试 ```bash npm test ``` ## 发展 ### 遵循 Stencil + 存储器公约 CI运行lint检查,但有一些工具可以帮助您遵循预期的代码样式,所以您没有 晚点再修. 在视觉工作室代码中,你可能会发现 [此 ESLint 扩展名](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 财务报告和审定财务报表 [这个最漂亮的一个](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 帮助. 我们使用两种工具来确保一致的代码风格和遵守斯通西尔推荐的做法. 胡斯基应该给你设置一个 承诺前的钩子 可以自动修复任何东西 并抱怨 关于其他的。 如果你看起来没有这个 之前已经安装过软件包 设置、 运行 `npm install` 再来一次. ### 依赖和构建产出 外部管理的任何内容都应该装入 npm , 并且不检查副本到这个编码库中 。 我们可以用斯通西尔 `copy` 任务和目标应用 构建策略 使事物到达正确的位置. 生成的建筑产出也应是 `.gitignore`(单位:千美元). 因为斯坦西尔的组件 _部分_ 在修改后生成 readme 文档 `@Prop`{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}或者类似的东西 必要时间 `npm run build` 在完成你的改变之前 文件是源控的,因为它们可以包括手动 内容。 CircleCI 也会运行 `npm run build` 如果需要进行任何未承诺的修改,则失败. 如果你做了一个新的,这是一个好主意 增加一行描述它的目的 在读取前 生成区域. ### 产出目标 > Stencil能够从一个应用程序的源头 编译到众多的目标 [更多信息,请查阅Stencil的文件.](https://stenciljs.com/docs/output-targets) 主要目标是: - `angularOutputTarget()` - 用于 [捐赠前端](https://github.com/thebiggive/donate-frontend)。 。 。 . - `dist-custom-elements` - 医生不会说得很清楚 但根据我们目前的配置, 它们是Angular项目/目标成功构建的依赖。 需要告诉角力 他们住在里面 `dist/` (因此载于 `dist/components`) (中文(简体) ). - `dist-hydrate-script` 用于SSD - 用于 [捐赠前端](https://github.com/thebiggive/donate-frontend) 最初由ECS服务. 斯坦西尔 [文档此文件](https://stenciljs.com/docs/hydrate-app)。 。 。 . - `dist` 一般网页模块 - 用于 [文字压力](https://github.com/thebiggive/wordpress)。 。 。 . - 故事书有自己的构建步骤,使用源代码的组件. 目前,这也用于 销售力量将组件嵌入 Iframes 是唯一可行的方法 我们得到了经验 以动态拉入组件. - `docs-readme` 用于文档. 我们的目标只是局部实验: - `www` ### 角构件 以及核心计划 `@biggive/components`,CI自动发布一个最适合 角为 `@biggive/components-angular`前者可以装入Angular,但后者会 工作比较好 [已记录在案](https://stenciljs.com/docs/angular)。 。 。 . 我们的Angular工作空间和图书馆就是按照文件设置的,但我们的Stencil图书馆就住在这 repo's root,一个目录从docs的结构上起. 迄今为止,这似乎没有不利影响. ### 资产依赖关系 到目前为止,我们的战略是避免将文件资产分开,如果这是一个外出选项,但 以其他方式选择复制到更复杂的构建时间变化(例如基-64-内置图像). 这是为了迅速提出最简单的概念工作证据,我们可能很快会重新审视. 现在: - FontAwesome使用纯SVG而不是字体. 这似乎很好,我怀疑是最好的选择 - 性能、组件互操作性、简单性和遵守许可证. - Euclid 字体被复制为 Stencil `copy` 任务和可用数据 `assets/fonts`。举例来说,Angular app的构建可以使用以下样式: 添加到一个 `angular.json` `"styles"` 键 : `"node_modules/@biggive/components/dist/biggive/assets/fonts/EuclidTriangle/stylesheet.css"` - 图像也被复制到 Stencil `copy` 任务,并使用固定引用 一种路径,例如:. `getAssetPath('/assets/images/banner.png')`见 [立体资产文件](https://stenciljs.com/docs/assets) 更多关于这个。 角质似乎 无法使用此选项 `setAssetPath()` 如果我们配置它 `"assets"` 将文件放入同一位置的密钥 文件夹作为应用程序自己的图像。 这就是我们采取的方法 [此概念分支的证明](https://github.com/thebiggive/donate-frontend/tree/COM-5-proof-of-concept)。 。 。 . 如果我们发现管理图像资产 混乱在应用软件, 我们可以采取另一种方法 尝试将图像导入到组件样式并添加 [`@rollup/plugin-image`](https://github.com/rollup/plugins/tree/master/packages/image/#readme) 到斯坦西尔的建筑配置。 或者,如果只有几个,我们也可以调查 是否为 `assetsDirs` 编号 `@Component` 以有效的方式折叠需要的东西 见Angular等人. ### 对样本网络组件作任何必要的修改 网络组件配置为 / src/ 组件 /src/index.html文件可以作为测试区域,在静态的HTML页面中显示网页组件. ### 运行 StencilJS 构建命令以包装您的更改 ```bash npm run build ``` ## 产出 ### dist 目录 - [https://stenciljs.com/docs/分发](https://stenciljs.com/docs/distribution) 此目录包含分布文件 ### www 目录 - [https://stenciljs.com/docs/www. 请检查date=中的日期值 (帮助)](https://stenciljs.com/docs/www) 该目录包含一个静态版本的网络组件,可用于测试和包含在简单的网络应用中. 由于CORS的限制,Index.html文件需要从网络服务器运行(不是作为本地文件). ### 故事书 我们跟着 [本指南](https://ionicframework.com/blog/how-to-use-storybook-with-stencil/) 改为 提供关键部件的样本使用:生活风格指南. 从 `main` 分支, CI 自动 npm-publishes 一个新的主要版本并更新 [故事书预览](https://components-production.thebiggive.org.uk/)。 。 。 . 现在,当地人 `npm run storybook` 将不会装入静态图像资产或字体。 我们把现实放在优先位置 在部署环境中进行这些工作,原因是: - CI单独复制主建筑 `assets` 输出到 S3 : 例如见 . `deploy-staging-storybook` 内 [CI 配置](https://npmcn.com/package/%40biggive/components/.circleci/config.yml) - 故事书有习惯 [`preview-head.html`](https://npmcn.com/package/%40biggive/components/.storybook/preview-head.html)。 。 。 . ## 向国家预防机制公布 ### 版本和出版 CircleCI 现在将创建一个新版本, 构建并发布到 npm 打开 _每个_ 承诺 `main`。生成版本编号后,每次发布都会 是新的“ major” 发行, 因此依赖的软件包必须使用版本 `"*"` 自动 可在 `npm update`。 。 。 . #### 手动更新 不需要手动更新,但如果自动程序 23年前使用的台阶是: - 更新根 `package.json`是因为 `version` 字段. - `npm install` 用于更新 `package-lock.json` 来匹配. - 更新 `angular/projects/components/package.json`是因为 `version` 字段这样 `@biggive/components-angular` 火柴也一样. - `git tag v0.0.1` (替换您的新版本) - `git push --tags` 必要时您也可以手动发布 npm : 首先, 如果您从未连接过 npm , 请连接 : `npm add_user`。 。 。 . 然后说: ```bash npm publish --access=public ``` 国家防范机制包名和版本号可在root包.json文件中更新. 目前设置为 (@ biggive/ 组件, 0.0.1) 有关出版和分发的更多信息,请访问 [https://stenciljs.com/docs/分发](https://stenciljs.com/docs/distribution) ## 在 Web app 中包含组件 ### 在 HTML 标题中包含以下脚本标签 ``` ``` ### 包含网络样本组件的标记 ``` ``` ### 样式组件 第一个样式组件可供使用 - 大小网格 - 大型运动卡 这些可以添加到 HTML 页面中,代码如下: ``` ``` ### 菲尔克 部分组件需要变体或备用版本来用于即将到来的菲尔克站点. 详情见 [philco.md (英语)](https://npmcn.com/package/%40biggive/components/docs/philco.md) ## 常见问题 ### @biggive/components 是什么？ 大赠出组件 ### 如何安装 @biggive/components？ 在项目目录运行 npm install @biggive/components，或使用 pnpm add / yarn add / bun add。 ### @biggive/components 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @biggive/components 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @biggive/components 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=24\.18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @biggive/components 可以商用吗？ @biggive/components 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @biggive/components 的下载量有多少？ 根据 npm 官方下载统计，@biggive/components 在 2026/10/08 – 2026/11/06 这 30 天内被下载 2,592 次，日均约 86 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @biggive/components 还在维护吗？ 最新版本 202611061308\.0\.0 发布于 2026/11/06（1 天前）；至今共发布 675 个版本，其中过去 12 个月发布了 93 个；首次发布于 2022/07/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。