Bulmil是一个基于 Web 组件的不可知的UI 库,由 布马.io 打开 Stencil.js (英语)。 。 。 .
Bulmil是作为概念的证明而创建的,它引入了一种简单的方法来消费通用的可再用网络组件,用于各种现代应用框架(Angular,Vue,React,Ember),或者仅仅使用纯Javascript.
: 警告: 目前在阿尔法语中, β 将可用一次 这个问题 已经解决.
为什么是斯坦西尔?
Stencil是使用Web组件构建快网络应用程序的编译器.
Stencil将最受欢迎的前端框架的最佳概念整合为一个编译时间而不是运行时间工具. Stencil取取TypeScript,JSX,一个微小的虚拟DOM层,高效的单向数据绑定,同步渲染管道(类似于React Fiber),并懒散地从盒子中装入,生成100%基于标准的Web组件,运行在支持自定义元素v1 spec的任何浏览器中.
Stencil组件只是Web组件,所以它们在任何主要框架中工作,或者根本没有任何框架.
开始
# Using npm
npm i bulmil
# Using yarn
yarn add bulmil
框架整合
Stencil的首要目标是去除使用特定框架的API来书写组件的需要. 它通过使用在所有现代浏览器中工作的标准化网络平台API来完成这个任务. 使用由浏览器提供的低等组件模型(所有框架都建立在这种模型上),可以让Stencil组件在一个框架内工作或者没有一个.
Stencil与不同框架的整合目前正在进行中。 随着Stencil的成熟,目标是方便写出标准网络组件,这些组件将汇编到各种输出目标上. 这允许开发者在使用共同的API的同时,保持与最新的网络标准保持一致. 随着框架的继续变化,所产生的组成部分也将更加具有未来保障.
以下清单载有已经开始的框架整合。 所有这些工作尚未完成.
无框架的组成部分
将一个由Stencil所建的组件整合到一个没有JavaScript框架的项目中是正前方的. 如果使用简单的HTML页面,可以通过脚本标记来添加你的组件. 例如,如果我们发布一个组件到 npm, 我们可以通过 Unpkg 这样加载组件:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/bulmil/latest/dist/bulmil.js"></script>
</head>
<body>
<bm-button>Button</bm-button>
</body>
</html>
或者,如果您想利用ES模块,您可以使用导入语句包含组件。 请注意,在此情况下 applyPolyfills 如果您的目标是边缘或IE11,则需要.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">
import {
applyPolyfills,
defineCustomElements,
} from 'https://unpkg.com/bulmil/latest/dist/esm/es2017/bulmil.define.js';
applyPolyfills().then(() => {
defineCustomElements(window);
});
</script>
</head>
<body>
<bm-button>Button</bm-button>
</body>
</html>
反应
使用 create-react-app 脚本 包含组件库的最简单方式是调用 defineCustomElements(window) 从 index.js 文档.
请注意,在此情况下 applyPolyfills 如果您的目标是边缘或IE11,则需要.
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(<App />, document.getElementById('root'));
registerServiceWorker();
applyPolyfills().then(() => {
defineCustomElements(window);
});
遵循上述步骤,您的网站组件可以用于React,但还有一些其他的复杂问题也必须加以考虑. 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 组件代码绑入窗口对象
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) :
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);
});
// nuxt.config.ts
{
plugins: [
{ src: '~/plugins/bulmil.ts', mode: 'client' },
],
}
任何Vue组件中都应有这些组件
render() {
return (
<div>
<bm-button>Button</bm-button>
</div>
)
}
Vue提供了几种不同的方式在应用程序中安装和使用框架. 上述整合Stencil自定义元件库的技术在Vue应用程序上进行了测试 vue-cli 以ES2015和WebPack为主要选项. 如果应用是使用其他选项生成的,类似的技术应发挥作用.
角质
在Angular CLI项目内使用Stencil所建的网络组件集是一个两步的过程. 需要:
- 包含
CUSTOM_ELEMENTS_SCHEMA在使用组件的模块中. - 打电话
defineCustomElements(window)从main.ts(或其他适当地点).
包括自定义元素Schema
包括联合国 CUSTOM_ELEMENTS_SCHEMA 在模块中允许使用 HTML 标记中的网络组件,而不使用产生错误的编译器 AppModule 在使用自定义元素的所有其他模块中.
举个例子 AppModule数字 :
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 因此:
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() 函数.
import { applyPolyfills, defineCustomElements } from '@bulmil/core/dist/loader';
...
applyPolyfills().then(() => {
defineCustomElements(window)
})
使用 View 儿童和 View 儿童访问组件
一旦纳入,可以在您的代码中使用 ViewChild 财务报告和审定财务报表 ViewChildren 例如:
import { Component, ElementRef, ViewChild } from '@angular/core';
import '@bulmil/core/dist';
@Component({
selector: 'app-home',
template: ` <bm-button #button></bm-button> `,
styleUrls: ['./home.component.scss'],
})
export class HomeComponent {
@ViewChild('button') buttonComponent: ElementRef<HTMLBulmilComponentElement>;
async onAction() {
await this.buttonComponent.nativeElement.componentMethod();
}
}
琥珀
在Ember中与 Stencil 组件合作真的很容易 多亏了 ember-cli-stencil 塞顿。 它处理:
- 将所需文件导入到您的
vendor.js - 将组件定义复制到
assets目录 - 可选生成一个包装组件,以改善与更古老的Ember版本的兼容性
开始安装 Ember 附加线
ember install ember-cli-stencil
现在,当你构建你的应用程序时,在您依赖的Stencil收藏将自动被发现并被拉入您的应用程序. 您可以开始使用您的自定义元素 hbs 文档,无需做进一步的工作。 详情请查看 ember-cli-stencil 文档。 。 。 .
发展
- 克隆此寄存器
- 使用
yarn install或者说npm install - 开始使用开发服务器
yarn storybook或者说npm run storybook