[Day23] - 介绍 Stencil.js 如何使用
今天我们来介绍一下 , 昨天说明的 Web Component 框架中的其中之一 - stencil.js
特别拿出来介绍 , 是因为如果你想要用 TypeScript 来管理你的 Web Component ,
Stencil.js 是一个不错的选择
Stencil.js
内文
利用 Stencil Cli 建立 Stencil 的新专案
npm init stencil
观察专案内容
当你利用 Stencil Cli 建立新专案後 , 它会帮你产生如下结构的专案内容
test-comp
├── .editorconfig
├── .gitignore
├── .prettierrc.json
├── LICENSE
├── package-lock.json
├── package.json
├── readme.md
├── src
│ ├── components
│ │ └── my-component
│ │ ├── my-component.css
│ │ ├── my-component.tsx
│ │ └── readme.md
│ ├── components.d.ts
│ ├── index.html
│ ├── index.ts
│ └── utils
│ ├── utils.spec.ts
│ └── utils.ts
├── stencil.config.ts
└── tsconfig.json
我们可以发现有一个 src/components 的资料夹 , 那就是我们放 Web Component 的地方
利用 stencil build 建立 Web Component
npm run build
我们可以看到多出一个 www/build 的资料夹
将资料夹中的所有档案 copy 出来
引用建立出来的 Web Component
利用 script 引入 [专案名称].js 跟 [专案名称].esm.js 这两个档案
<script type="module" src="./test-comp.esm.js"></script>
<script nomodule="" src="./test-comp.js"></script>
我们就可以在 html 中使用我们产出的 web component
<!doctype html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Stencil Component Starter</title>
<script type="module" src="./test-comp.esm.js"></script>
<script nomodule="" src="./test-comp.js"></script>
</head>
<body>
<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
</body>
</html>
>>: [Day12] [笔记]React Hooks - UseContent
Day 0x4 UVa10041 Vito's Family
Virtual Judge ZeroJudge 题意 Vito 常拜访亲戚，所以想要找一间和所有亲戚...
RISC-V on Rust 从零开始(5) - RISC-V 指令集分析
有了基本档案架构後，开始动工指令的部分。RISC-V将指令分成数个子集，其中包括RV32I、RV32...
Day 19 - UML x Component — Independent （上）
前面把有依赖关系的 Component 都讲一讲之後，今天就来带过其他的 UI 元件吧，因为想介绍...
AI ninja project [day 4] AI RPA系统--名片model建立篇
好的，我们继续利用上一篇文章建立的csv资料及来进行训练， 首先我们建立一个功能来帮助从字串提取特徵...
D-02-验证结果 ? ExpectedObjects
如何验证结果 在学会如何Mock介面後，接下来处理的问题就是复杂的类别要怎麽来验证，当然可以透过JS...