其他分享
首页 > 其他分享> > 轻量级 Web 组件编译器 — Stencil

轻量级 Web 组件编译器 — Stencil

作者:互联网

为什么要使用Stencil

Stencil是一个简单的编译器,用于生成Web组件和静态站点生成的渐进式Web应用(PWA)。Stencil是由Ionic团队为其下一代高性能移动和桌面Web组件而构建的。

Stencil将最流行的前端框架的最佳概念结合到编译时而不是运行时工具中。它结合了TypeScript、JSX和一个异步渲染管道,以确保动画的流畅运行和延迟加载,从而生成100%基于标准的Web组件,可以在现代浏览器和传统浏览器上运行。

通过本教程中,你将从头开始构建自己的应用,分别使用Stencil CLI 和 云开发平台

Stencil-CLI 快速搭建项目

一、搭建本地开发环境

二、创建新的初始应用

 npm init stencil

模板可以用来创建独立的组件,也可以用来创建整个应用程序。当运行npm init stencil时,你会得到一个提示,以便你选择要启动的项目类型。

? Pick a starter › - Use arrow-keys. Return to submit.

❯  component     Collection of web components that can be used anywhere
   app           Minimal starter for building a Stencil app or website

选择“component”选项将提示您输入项目的名称。

✔ Pick a starter › component
? Project name › my-first-stencil-project

这里,我们将我们的项目命名为“my-first-stencil project”。点击ENTER来确认您的选择后,CLI将在一个与您提供的项目名称匹配的目录中为我们脚手架一个Stencil项目。

在成功创建我们的项目之后,CLI将向控制台输出如下内容:

✔ Project name › my-first-stencil-project
✔ All setup  in 26 ms

  We suggest that you begin by typing:

  $ cd my-first-stencil-project
  $ npm install
  $ npm start

  $ npm start
    Starts the development server.

  $ npm run build
    Builds your components/app in production mode.

  $ npm test
    Starts the test runner.

  Further reading:

   - https://github.com/ionic-team/stencil-component-starter

  Happy coding! 

标签:npm,Web,Stencil,部署,点击,编译器,开发,应用,轻量级
来源: https://www.cnblogs.com/helong-123/p/16333559.html