今天我們來介紹一下 , 昨天說明的 Web Component 框架中的其中之一 - stencil.js
特別拿出來介紹 , 是因為如果你想要用 TypeScript 來管理你的 Web Component ,
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>
iThome鐵人賽
看影片追技術