简介

Stencil JS 的想法是编写一个组件,然后到处使用,这是我长期以来一直想要付诸实践的想法。这篇文章将介绍创建和发布简单 Stencil 组件的简单直接的过程。然后,我将介绍在 React、Vue 和 Angular 中使用该组件。任何比基础更详细的东西都将保留在结论中。开始了!

创建 Stencil JS 项目

npm init stencil

CLI 将为您提供一些选项。在此示例中,我将选择component,并在出现提示时将项目命名为test-demo-seanmclem。我已将我的用户名包含在项目名称中以确保它是唯一的。如果使用该名称,那么您将无法发布到 NPM。

您还需要更改到您的项目目录,并安装模板依赖项。

cd test-demo-seanmclem
npm install

Stencil CLI 将创建我们的项目,但它不仅仅是顾名思义的一个单独的组件。它将生成一个包含components文件夹的完整 Stencil 项目。该文件夹将包含我们希望导出的任何组件。导出的组件将包含在生产构建中,发布到 NPM,然后可以单独导入到消费项目中。 Stencil 项目的其余部分有助于促进项目组件的发布和使用。

我们的模板组件

Stencil CLI 将向此组件文件夹添加一个示例组件。它被称为my-component,它需要 3 个道具,first、middle和last。每个道具都是你名字的一部分。渲染的组件接受这些输入并输出一个类似Hello, World!? I'm Your Full Name的字符串。

运行以下命令来准备项目以进行发布

npm run build

发布到 NPM

我们正在迅速行动,因为这个项目和my-component已经拥有我们需要的一切。让我们将它发布到 NPM。

您需要在 NPM 上拥有一个帐户才能继续。注册非常简单且免费,如果您还没有的话。然后登录 CLI

npm login

按照提示登录到 CLI,然后运行 -

npm publish

如果一切顺利,CLI 应该返回你的新库名称@版本,比如我的test-demo-seanmclem@0.0.1。你也可以在你的 npm 设置>包页面中找到它。

反应

创建项目

npx create-react-app stencil-in-react

添加组件

我们需要进入 index.js 文件并添加一个导入。不过,我们不会导入特定的组件。相反,我们将导入一个函数,该函数将_定义_由 Stencil 项目导出的所有组件,并使它们可用于 react 项目。这就是将原生 Web 组件(称为自定义元素)添加到项目中的方式。它们通常会尽早在全球范围内注册,而不是在需要它们的地方导入。

所以我们将向index.js添加一个导入,如下所示:

import { defineCustomElements } from 'test-demo-seanmclem/loader';

在靠近底部的某个地方,我们将调用此函数。稍后我会讨论 polyfills。

defineCustomElements();

接下来,在app.js中,您使用新的自定义元素

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />

        <my-component first='Your' middle='Full' last='Name'></my-component>

      </header>
    </div>
  );
}

我替换了my app.js中 img 标签下的所有内容。

差不多就是这样。你可以在 React 中使用带有简单 props 的简单 Stencil 组件,而无需做任何特别的事情。对于某些道具和事件侦听器,更复杂的组件可能需要额外的工作。我想很快再写一篇关于这个的文章,但对于 React 来说就是这样。

创建项目

npm install -g @vue/cli
vue create stencil-in-vue
cd stencil-in-vue

添加组件

npm install test-demo-seanmclem

现在我们将 defineCustomElements 添加到我们的一个主文件中。特别是main.js用于 Vue。

import { defineCustomElements } from 'test-demo-seanmclem/loader';

再一次,在靠近底部的某个地方,我们将调用这个函数。

defineCustomElements();

接下来,在App.Vue中使用自定义元素。您可以将它放在 HelloWorld 组件上方,但我将其完全删除

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <my-component first="Your" middle="Full" last="Name"></my-component>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

角度

创建项目

npm install -g @angular/cli 
ng new stencil-in-angular
cd stencil-in-angular

添加组件

npm install test-demo-seanmclem

现在我们将添加一个导入到main.js

import { defineCustomElements } from 'test-demo-seanmclem/loader';

在靠近底部的某个地方,我们将调用此函数。

defineCustomElements();

接下来,在app.component.html中使用新的自定义元素。我替换了该文件中的几乎所有内容。

<div class="content" role="main">
  <my-component first="Your" middle="Full" last="Name"></my-component>
</div>

以上就是 Stencil 在三大框架中生成的 Web 组件的基本实现。以后我会写更多关于这个主题的文章。因此,请随时关注我以获取更多信息。

结论/更多信息

填充物

这些天来,您可能已经完成了对 IE 和旧版浏览器的支持。但是,Stencil 包含一些可选的 polyfill,用于易于实现的那些。您只需在defineCustomElements导入语句中添加额外的applyPolyfills导入,并将defineCustomElements调用包装在异步applyPolyfills().then()中。

在此处阅读有关的更多信息。

反应

正如我提到的,react 与更高级的事件和道具绑定有一些复杂性。大多数都可以通过手动包装组件或react-output-target来缓解。在此处阅读有关的更多信息也。

Angular ViewChild

Angular 文档调用了一种访问组件上的函数的特殊方法。这可能很有用,但并不总是必要的。阅读更多关于这里

谢谢阅读!