Stencil App Starter 项目教程
1. 项目的目录结构及介绍
stencil-app-starter/
├── src/
│ ├── assets/
│ ├── components/
│ ├── global/
│ ├── index.html
│ ├── index.ts
│ ├── service-worker.ts
│ └── utils/
├── .editorconfig
├── .gitignore
├── .prettierrc.json
├── LICENSE
├── package.json
├── README.md
├── stencil.config.ts
└── tsconfig.json
目录结构介绍
-
src/: 项目的源代码目录,包含所有组件、样式、脚本等。
- assets/: 存放静态资源文件,如图片、字体等。
- components/: 存放项目的Web组件。
- global/: 存放全局样式和脚本。
- index.html: 项目的入口HTML文件。
- index.ts: 项目的入口TypeScript文件。
- service-worker.ts: 用于PWA的Service Worker文件。
- utils/: 存放工具函数和辅助代码。
-
.editorconfig: 编辑器配置文件,用于统一代码风格。
-
.gitignore: Git忽略文件配置。
-
.prettierrc.json: Prettier代码格式化配置文件。
-
LICENSE: 项目许可证文件。
-
package.json: 项目的依赖管理文件。
-
README.md: 项目的说明文档。
-
stencil.config.ts: Stencil项目的配置文件。
-
tsconfig.json: TypeScript配置文件。
2. 项目的启动文件介绍
index.html
index.html
是项目的入口HTML文件,包含了基本的HTML结构和一些必要的元数据。通常情况下,这个文件不需要进行太多的修改,除非你需要添加一些全局资源或配置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stencil App Starter</title>
</head>
<body>
<my-app></my-app>
</body>
</html>
index.ts
index.ts
是项目的入口TypeScript文件,负责初始化应用并加载所有必要的组件。通常情况下,这个文件也不需要进行太多的修改。
import { defineCustomElements } from '@stencil/core/loader';
defineCustomElements();
3. 项目的配置文件介绍
stencil.config.ts
stencil.config.ts
是Stencil项目的核心配置文件,用于配置项目的构建、打包、测试等行为。
import { Config } from '@stencil/core';
export const config: Config = {
namespace: 'my-app',
outputTargets: [
{
type: 'www',
serviceWorker: null, // disable service workers
},
],
};
tsconfig.json
tsconfig.json
是TypeScript的配置文件,用于配置TypeScript编译器的行为。
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"allowUnreachableCode": false,
"declaration": false,
"esModuleInterop": true,
"experimentalDecorators": true,
"lib": ["dom", "es2017"],
"moduleResolution": "node",
"module": "esnext",
"target": "es2017",
"noUnusedLocals": true,
"noUnusedParameters": true,
"jsx": "react",
"jsxFactory": "h"
},
"include": ["src"]
}
package.json
package.json
是项目的依赖管理文件,包含了项目的依赖、脚本命令等信息。
{
"name": "stencil-app-starter",
"version": "0.0.1",
"description": "Stencil App Starter",
"scripts": {
"build": "stencil build",
"start": "stencil build --dev --watch --serve",
"test": "stencil test --spec --e2e",
"test.watch": "stencil test --spec --e2e --watchAll"
},
"dependencies": {
"@stencil/core": "^2.0.0"
},
"license": "MIT"
}
通过以上配置,你可以轻松地启动和构建Stencil项目,并根据需要进行自定义配置。