CLI后端云原生【免费下载链接】vercelDevelop. Preview. Ship.项目地址https://gitcode.com/gh_mirrors/ve/vercel点击查看免费下载本篇技术指南以 Vercel 仓库中 Stencil Component Starter 文档 为主体结合仓库内的 Stencil 组件 fixture 与 官方 Stencil 应用示例完整讲解如何使用 Stencil 编译器构建 100% 标准化的 Web Components、如何组织组件工程结构、如何通过三种策略在任意前端项目中消费这些组件以及如何将 Stencil 项目部署到 Vercel。读完本文你将掌握一套从零初始化、本地开发、生产构建、测试到云端发布的可落地实战流程。Stencil 是什么把框架能力前移到编译期Stencil 是一个用于构建 Web Components 的编译器其核心理念是编译期compile-time而非运行期run-time工具。它在编译阶段吸收主流前端框架的最佳实践——TypeScript、JSX、轻量虚拟 DOM、高效单向数据绑定、类似 React Fiber 的异步渲染管线以及开箱即用的懒加载——最终生成遵循 Custom Elements v1 规范的、可在任何现代浏览器中运行的标准 Web Components。这意味着 Stencil 组件本质上就是原生 Web Components它们可以在任何主流框架React、Vue、Angular 等中使用也可以在完全不使用框架的纯 HTML 页面中使用。正如文档中所强调的这也是组件命名规范下文详述之所以重要的根本原因。初始化一个 Stencil 组件项目方式一克隆 Component Starter文档推荐原文档给出了最直接的起步方式——克隆官方 starter 并清空远端关联git clone https://github.com/ionic-team/stencil-component-starter.git my-component cd my-component git remote rm origin克隆后先安装依赖即可进入开发循环npm install npm start说明git remote rm origin用于切断与官方模板仓库的关联让新项目拥有独立的 Git 历史与远端。方式二使用官方初始化器Vercel 示例采用Vercel 仓库的 examples/stencil/readme.md 给出了另一条路径——通过 Stencil 官方项目初始化器创建npm init stencil执行后会以交互方式选择项目类型生成的项目即可直接对接 Vercel 部署。三种构建命令开发、生产与测试原文档定义了组件开发的核心命令闭环。在 Vercel 仓库的 fixture 中这些命令被固化为 package.json 的 scripts命令作用fixture 中的实现npm start启动开发服务器监听文件变化并热更新预览stencil build --dev --watch --servenpm run build执行生产构建输出可分发产物stencil build --docs同时生成组件 API 文档npm test运行组件单元测试stencil test --spec --e2e完整应用示例中的测试命令见 examples/stencil/package.json其中--docs参数会触发docs-readme输出目标为每个组件生成自动更新的 readme 文档。在 fixture 中可以看到由构建自动生成的 my-component 组件文档它以表格形式记录了组件的全部 PropertyPropertyAttributeDescriptionTypeDefaultfirstfirstThe first namestringundefinedlastlastThe last namestringundefinedmiddlemiddleThe middle namestringundefined深入组件工程Stencil 项目结构剖析以 Vercel 仓库中的 Stencil 组件 fixturepackages/static-build/test/fixtures/stencil-v4为样本一个标准 Stencil 组件项目包含以下关键部分。1. 编译器配置stencil.config.tsstencil.config.ts 是 Stencil 编译器的配置文件声明了命名空间与输出目标outputTargetsimport { Config } from stencil/core; export const config: Config { namespace: stencil-v4, outputTargets: [ { type: dist, esmLoaderPath: ../loader }, { type: dist-custom-elements }, { type: docs-readme }, { type: www, serviceWorker: null }, // disable service workers ], };各输出目标的含义dist标准库构建输出供通过 npm 包消费对应 package.json 中的main、module、es2015、es2017、unpkg等入口字段dist-custom-elements按自定义元素标准生成的独立模块输出docs-readme为每个组件生成上文所述的自动文档www生成可静态托管的站点产物此处serviceWorker: null明确关闭了 Service Worker避免在纯静态部署场景引入不必要的缓存逻辑。完整应用示例 examples/stencil/stencil.config.ts 还展示了globalStyle全局样式src/global/app.css与globalScript全局脚本src/global/app.ts的配置方式并同样通过serviceWorker: null关闭生产环境的 Service Worker。2. TypeScript 与 JSX 配置tsconfig.jsontsconfig.json 中值得注意的两个选项jsx: react与jsxFactory: hStencil 复用 JSX 语法书写组件模板但编译目标是 Web Components 而非 React 元素experimentalDecorators: true启用装饰器语法用于Component、Prop等 Stencil 装饰器。3. 组件实现tsx 文件my-component.tsx 展示了 Stencil 组件的最小完整形态import { Component, Prop, h } from stencil/core; import { format } from ../../utils/utils; Component({ tag: my-component, styleUrl: my-component.css, shadow: true, }) export class MyComponent { /** The first name */ Prop() first: string; /** The middle name */ Prop() middle: string; /** The last name */ Prop() last: string; private getText(): string { return format(this.first, this.middle, this.last); } render() { return divHello, World! Im {this.getText()}/div; } }几个关键点Component装饰器声明自定义元素标签名tag、组件样式与是否启用 Shadow DOMshadow: true对应 my-component.css 中以:host选择器控制组件宿主元素Prop()声明组件的对外属性即消费方可通过 HTML attribute 传入数据render()方法以 JSX 语法返回模板组件逻辑可复用外部工具函数如 utils.ts 中提供的format函数负责将三个姓名片段拼接为完整字符串。4. 页面入口index.html组件开发预览页 index.html 展示了模块化脚本与降级脚本的加载方式以及组件的实际用法script typemodule src/build/stencil-v4.esm.js/script script nomodule src/build/stencil-v4.js/script ... my-component firstStencil lastDont call me a framework JS/my-component现代浏览器加载typemodule的 ESM 版本旧浏览器回退到nomodule的降级版本组件以自定义标签形式直接书写在 HTML 中属性即组件Prop。组件命名规范避免使用 stencil 前缀原文档明确提出一个重要的工程规范创建新组件标签时不要在组件名中使用stencil例如不要写stencil-datepicker。原因很直接——生成的组件与 Stencil 本身几乎无关它就是一个标准 Web Component推荐的实践是使用公司品牌或组件族的统一前缀。例如 Ionic 生态中所有 Web Components 都使用ion前缀。这样既保证了组件命名的语义清晰又避免了与 Stencil 框架本身产生概念混淆。消费 Stencil 组件的三种策略原文档给出了三种向应用引入 Stencil Web Components 的推荐方式前置条件均为先 发布到 NPM 的unpkg字段dist/stencil-v4/stencil-v4.esm.js与files字段dist/、loader/三种方式分别如下。策略一Script 标签直引将打包产物通过script标签引入页面头部然后即可在模板、JSX 或 HTML 中任意使用组件script typemodule srchttps://unpkg.com/my-component0.0.1/dist/my-component.esm.js/script这是对零构建环境纯 HTML 页面、CMS 模板等最友好的方式npm 包中的 ESM 产物可直接通过 CDN 加载。策略二npm 安装 Script 标签在项目中先安装依赖再以本地路径引入模块产物npm install my-component --savescript typemodule srcnode_modules/my-component/dist/my-component.esm.js/script这种方式适合不希望依赖远程 CDN 的私有化或离线场景。策略三在 Stencil Starter 应用中 import在 Stencil 组件应用内部通过 ES Module 导入整包后直接使用npm install my-component --saveimport my-component;导入后即可在应用的任意模板位置使用该自定义元素。这种方式依赖dist输出的模块入口对应 package.json 的module/es2015字段是组件与应用同属 Stencil 生态时的首选。将 Stencil 项目部署到 VercelVercel 仓库同时提供了两种 Stencil 部署场景的证据验证了零配置部署的可行性。场景一Stencil 应用零配置部署examples/stencil 是 Vercel 官方提供的 Stencil 应用示例其文档明确说明这是一个可以zero configuration零配置部署到 Vercel 的 Stencil 应用。它的www输出目标stencil.config.ts会生成静态站点产物Vercel 在构建阶段自动识别 Stencil 项目执行npm run build并托管www目录下的静态文件。该示例还演示了组件测试的完整形态每个组件都配套了.spec.ts单元测试与.e2e.ts端到端测试例如 app-root.e2e.ts对应stencil test --spec --e2e命令。场景二static-build 构建验证在 Vercel 的静态构建测试夹具packages/static-build/test/fixtures/stencil-v4中probes.json定义了部署后的验证探针{ probes: [ { path: /, mustContain: Stencil Component Starter } ] }该探针要求访问站点根路径/时响应内容必须包含 Stencil Component Starter这正是 index.html 的title文本。这从 CI 层面证实了 Stencil 的www构建产物可以被 Vercel 静态托管并正确渲染。小结从克隆 Stencil Component Starter、运行开发与构建命令到理解组件工程结构、遵循命名规范、通过三种策略消费组件再到在 Vercel 上零配置部署并经过静态构建探针验证——本文以 Vercel 仓库中的 Stencil Component Starter 文档 为主线配合仓库内的组件 fixture 与官方示例完整覆盖了 Stencil Web Components 从开发到上线的全链路。无论是构建可复用的组件库还是搭建完整的 Stencil 应用这套流程都可以直接落地使用。赞分享CLI后端云原生【免费下载链接】vercelDevelop. Preview. Ship.项目地址https://gitcode.com/gh_mirrors/ve/vercel点击查看免费下载相关推荐使用 Stencil 构建 Web Components 应用并零配置部署到 Vercelframework-boilerplates 实战解析使用 Stencil 构建 Web Components 应用并零配置部署到 Vercelframework boilerplates 实战解析 本文以开源仓示例工程前端后端在 Vercel 上零配置部署 Polymer Web Components 应用examples/polymer 示例全解在 Vercel 上零配置部署 Polymer Web Components 应用examples/polymer 示例全解 本篇技术指南围绕当前仓库中的 eCLI后端云原生在 Vercel 上零配置部署 FastAPI官方 Starter 项目结构、本地开发与生产发布实战在 Vercel 上零配置部署 FastAPI官方 Starter 项目结构、本地开发与生产发布实战 FastAPI 是当前流行的 Python Web 框架CLI后端云原生上一篇零手动Triton Inference Server模型输入输出文档自动化生成全攻略下一篇告别告警风暴7×24小时无死角监控系统搭建指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考