Stencil Store 项目启动与配置教程

1. 项目的目录结构及介绍

Stencil Store 是一个基于 Stencil 框架的开源项目，它的目录结构如下所示：

stencil-store/
├── src/                       # 源代码目录
│   ├── components/            # 组件目录
│   │   ├── my-component/       # 示例组件
│   │   │   ├── index.html      # 组件的 HTML 模板
│   │   │   ├── index.ts        # 组件的 TypeScript 代码
│   │   │   └── index.css       # 组件的 CSS 样式
│   │   └── ...                 # 其他组件
│   ├── global/                # 全局样式和类型定义
│   └── ...                     # 其他源代码文件
├── packages/                  # 外部依赖和工具函数
├── dist/                      # 编译后的生产代码目录
├── e2e/                       # 端到端测试
├── tools/                     # 构建和开发工具
├── . stencilrc.json           # Stencil 配置文件
├── package.json               # 项目依赖和脚本
└── ...                        # 其他文件

在这个结构中，src/components 目录包含了所有的 Stencil 组件，src/global 包含了全局样式和类型定义，而 dist 目录是构建过程后生成的文件存放的地方。

2. 项目的启动文件介绍

项目的启动主要是通过 package.json 文件中的脚本完成的。以下是一些常用的启动脚本：

• start: 通常用于启动本地开发服务器。
• build: 用于构建项目，生成生产环境下的代码。
• test: 运行测试用例。

例如，启动本地开发服务器的命令可能是这样的：

"scripts": {
  "start": "stencil build --dev",
  // ... 其他脚本
}

在命令行中运行 npm start 或 yarn start 就可以启动开发服务器。

3. 项目的配置文件介绍

Stencil Store 项目的配置主要通过 .stencilrc.json 文件进行。这是一个 JSON 格式的文件，用于配置 Stencil 打包工具的行为。以下是一个配置文件的例子：

{
  "compilerConfig": {
    "namespace": "MyComponents",
    "outputPath": "dist",
    "bundle": "es2017",
    "copy": [
      {
        "src": "components/**/*",
        "dest": "dist/components"
      }
    ]
  },
  "plugins": [
    // ... 插件配置
  ]
}

在这个配置文件中，compilerConfig 下的 namespace 指定了组件的命名空间，outputPath 定义了编译后的文件存放路径，bundle 指定了打包的模块标准，而 copy 配置项则定义了在构建过程中需要复制的文件或目录。

通过这个配置文件，开发者可以定制化 Stencil 的编译和打包过程，以满足不同项目的需求。