# @bulmil/core 中文文档
规范地址：https://npmcn.com/package/%40bulmil/core/
版本：0\.56\.0
npm 元数据更新时间：2024-04-08T22:29:03.758Z
中文译文更新时间：2026-11-08T19:34:07.945Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40bulmil/core
原文对照：https://npmcn.com/package/%40bulmil/core/?lang=original
项目主页：https://bulmil.vercel.app/
源码仓库：https://github.com/gomah/bulmil
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：3.4 MB，407 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- 首次发布：2020-08-31T14:16:45.996Z
- 最新版本发布：2024-04-08T22:29:03.599Z
- 近 30 天下载量：16453（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：88（近 12 个月 0 个）
## 中文简介
## 安装
```sh
npm install @bulmil/core
```
也可以使用：`pnpm add @bulmil/core`、`yarn add @bulmil/core`、`bun add @bulmil/core`
## README
[](https://npmcn.com/package/%40bulmil/core/#)[ ](https://bulmil.netlify.com/)[ ](https://stenciljs.com/docs/style-guide)[ ](https://npmjs.com/package/bulmil)[](https://opensource.org/licenses/MIT)
[](https://david-dm.org/gomah/bulmil)[ ](https://circleci.com/gh/Gomah/bulmil)[ ](https://npmjs.com/package/bulmil)[ ](https://packagephobia.now.sh/result?p=bulmil)[](https://bundlephobia.com/result?p=bulmil)
Bulmil是一个基于 Web 组件的不可知的UI 库,由 [布马.io](https://bulma.io/) 打开 [Stencil.js (英语)](https://stenciljs.com/)。 。 。 .
Bulmil是作为概念的证明而创建的,它引入了一种简单的方法来消费通用的可再用网络组件,用于各种现代应用框架(Angular,Vue,React,Ember),或者仅仅使用纯Javascript.
: 警告: 目前在阿尔法语中, β 将可用一次 [这个问题](https://github.com/Gomah/bulmil/issues/26) 已经解决.
## 为什么是斯坦西尔?
Stencil是使用Web组件构建快网络应用程序的编译器.
Stencil将最受欢迎的前端框架的最佳概念整合为一个编译时间而不是运行时间工具. Stencil取取TypeScript,JSX,一个微小的虚拟DOM层,高效的单向数据绑定,同步渲染管道(类似于React Fiber),并懒散地从盒子中装入,生成100%基于标准的Web组件,运行在支持自定义元素v1 spec的任何浏览器中.
Stencil组件只是Web组件,所以它们在任何主要框架中工作,或者根本没有任何框架.
## 开始
```bash
# Using npm
npm i bulmil
# Using yarn
yarn add bulmil
```
* * *
## 框架整合
Stencil的首要目标是去除使用特定框架的API来书写组件的需要. 它通过使用在所有现代浏览器中工作的标准化网络平台API来完成这个任务. 使用由浏览器提供的低等组件模型(所有框架都建立在这种模型上),可以让Stencil组件在一个框架内工作或者没有一个.
Stencil与不同框架的整合目前正在进行中。 随着Stencil的成熟,目标是方便写出标准网络组件,这些组件将汇编到各种输出目标上. 这允许开发者在使用共同的API的同时,保持与最新的网络标准保持一致. 随着框架的继续变化,所产生的组成部分也将更加具有未来保障.
以下清单载有已经开始的框架整合。 所有这些工作尚未完成.
### 无框架的组成部分
将一个由Stencil所建的组件整合到一个没有JavaScript框架的项目中是正前方的. 如果使用简单的HTML页面,可以通过脚本标记来添加你的组件. 例如,如果我们发布一个组件到 npm, 我们可以通过 Unpkg 这样加载组件:
```html
Button
```
或者,如果您想利用ES模块,您可以使用导入语句包含组件。 请注意,在此情况下 `applyPolyfills` 如果您的目标是边缘或IE11,则需要.
```html
Button
```
* * *
### 反应
使用 `create-react-app` 脚本 包含组件库的最简单方式是调用 `defineCustomElements(window)` 从 `index.js` 文档. 请注意,在此情况下 `applyPolyfills` 如果您的目标是边缘或IE11,则需要.
```tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { applyPolyfills, defineCustomElements } from '@bulmil/core/dist/loader';
ReactDOM.render(, document.getElementById('root'));
registerServiceWorker();
applyPolyfills().then(() => {
defineCustomElements(window);
});
```
遵循上述步骤,您的网站组件可以用于React,但还有一些其他的复杂问题也必须加以考虑. [https://custom-elements- everywhere.com/ 页面存档备份,存于互联网档案馆](https://custom-elements-everywhere.com/) 说得好.
* * *
### 阴道
为了在 Vue app 中使用自定义元素库,应用程序必须被修改以定义自定义元素并通知 Vue 编译器哪些元素在编译过程中会忽略. 所有这一切都可以在 `main.js` 文档.
假设您已经运行 `npm install --save bulmil` 之前,还有 `bulmil` 是我们编成的 Web 组件的名称, 已经发布到 npm, 您将组件导入到 'main.js' 文件
- 导入节点模块
- 告诉 Vue 忽略自定义元素标记( 见 `https://vuejs.org/v2/api/#ignoredElements`(中文(简体) )
- 将 Stenciljs 组件代码绑入窗口对象
```tsx
import Vue from 'vue';
import App from './App.vue';
import { applyPolyfills, defineCustomElements } from '@bulmil/core/dist/loader';
Vue.config.productionTip = false;
// Tell Vue to ignore all components defined in the bulmil package.
//T he regex assumes all components names are prefixed with 'bm-'
Vue.config.ignoredElements = [/bm-\w*/];
// Bind the custom elements to the window object
applyPolyfills().then(() => {
defineCustomElements(window);
});
new Vue({
render: (h) => h(App),
}).$mount('#app');
```
#### 使用 Nuxt
创建插件( 如 bulmil. ts) :
```ts
import Vue from 'vue';
import { applyPolyfills, defineCustomElements } from '@bulmil/core/dist/loader';
Vue.config.productionTip = false;
Vue.config.ignoredElements = [/bm-\w*/];
// Bind the custom elements to the window object
applyPolyfills().then(() => {
defineCustomElements(window);
});
```
```ts
// nuxt.config.ts
{
plugins: [
{ src: '~/plugins/bulmil.ts', mode: 'client' },
],
}
```
任何Vue组件中都应有这些组件
```tsx
render() {
return (
Button
)
}
```
Vue提供了几种不同的方式在应用程序中安装和使用框架. 上述整合Stencil自定义元件库的技术在Vue应用程序上进行了测试 `vue-cli` 以ES2015和WebPack为主要选项. 如果应用是使用其他选项生成的,类似的技术应发挥作用.
### 角质
在Angular CLI项目内使用Stencil所建的网络组件集是一个两步的过程. 需要:
1. 包含 `CUSTOM_ELEMENTS_SCHEMA` 在使用组件的模块中.
2. 打电话 `defineCustomElements(window)` 从 `main.ts` (或其他适当地点).
#### 包括自定义元素Schema
包括联合国 `CUSTOM_ELEMENTS_SCHEMA` 在模块中允许使用 HTML 标记中的网络组件,而不使用产生错误的编译器 `AppModule` 在使用自定义元素的所有其他模块中. 举个例子 `AppModule`数字 :
```tsx
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
```
这个 `CUSTOM_ELEMENTS_SCHEMA` 需要包含在使用自定义元素的任何模块中.
#### 调用定义的海关元素
用 Stencil 构建的组件收藏包含一个主要功能,用于加载收藏中的组件. 这个功能叫做 `defineCustomElements()` 在你申请时需要叫它一次 一个方便的地方做这个是在 `main.ts` 因此:
```tsx
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
// Note: loader import location set using "esmLoaderPath" within the output target confg
import { defineCustomElements } from '@bulmil/core/dist/loader';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.log(err));
defineCustomElements(window);
```
#### 边缘和IE11多填充
如果您希望您的自定义元素能够在旧浏览器上工作, 您应该添加 `applyPolyfills()` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}那个超音速飞行器 `defineCustomElements()` 函数.
```tsx
import { applyPolyfills, defineCustomElements } from '@bulmil/core/dist/loader';
...
applyPolyfills().then(() => {
defineCustomElements(window)
})
```
#### 使用 View 儿童和 View 儿童访问组件
一旦纳入,可以在您的代码中使用 `ViewChild` 财务报告和审定财务报表 `ViewChildren` 例如:
```tsx
import { Component, ElementRef, ViewChild } from '@angular/core';
import '@bulmil/core/dist';
@Component({
selector: 'app-home',
template: ` `,
styleUrls: ['./home.component.scss'],
})
export class HomeComponent {
@ViewChild('button') buttonComponent: ElementRef;
async onAction() {
await this.buttonComponent.nativeElement.componentMethod();
}
}
```
* * *
### 琥珀
在Ember中与 Stencil 组件合作真的很容易 多亏了 `ember-cli-stencil` 塞顿。 它处理:
- 将所需文件导入到您的 `vendor.js`
- 将组件定义复制到 `assets` 目录
- 可选生成一个包装组件,以改善与更古老的Ember版本的兼容性
开始安装 Ember 附加线
```bash
ember install ember-cli-stencil
```
现在,当你构建你的应用程序时,在您依赖的Stencil收藏将自动被发现并被拉入您的应用程序. 您可以开始使用您的自定义元素 `hbs` 文档,无需做进一步的工作。 详情请查看 [`ember-cli-stencil` 文档](https://github.com/alexlafroscia/ember-cli-stencil)。 。 。 .
* * *
## 发展
1. 克隆此寄存器
2. 使用 `yarn install` 或者说 `npm install`
3. 开始使用开发服务器 `yarn storybook` 或者说 `npm run storybook`
## 许可证
[MIT 许可证](https://npmcn.com/package/%40bulmil/core/LICENSE)
## 常见问题
### 如何安装 @bulmil/core？
在项目目录运行 npm install @bulmil/core，或使用 pnpm add / yarn add / bun add。
### @bulmil/core 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @bulmil/core 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @bulmil/core 可以商用吗？
@bulmil/core 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @bulmil/core 的下载量有多少？
根据 npm 官方下载统计，@bulmil/core 在 2026/10/09 – 2026/11/07 这 30 天内被下载 16,453 次，日均约 548 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @bulmil/core 还在维护吗？
最新版本 0\.56\.0 发布于 2024/04/09（2 年前）；至今共发布 88 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/08/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。