sveld 项目教程

sveld 项目教程

sveldGenerate TypeScript definitions for your Svelte components项目地址:https://gitcode.com/gh_mirrors/sv/sveld

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

sveld/
├── playground/
│   ├── .gitignore
│   ├── .npmignore
│   ├── README.md
│   ├── index.js
│   ├── package.json
│   ├── pnpm-lock.yaml
│   └── types/
├── tests/
│   └── e2e/
│       ├── single-export/
│       ├── single-export-default-only/
│       ├── multi-export/
│       ├── multi-export-typed/
│       ├── multi-export-typed-ts-only/
│       ├── glob/
│       └── carbon/
├── .gitignore
├── .npmignore
├── README.md
├── index.js
├── package.json
├── pnpm-lock.yaml
└── types/

目录结构介绍

• playground/: 包含项目的示例代码和配置文件。

  • .gitignore: Git 忽略文件。
  • .npmignore: npm 忽略文件。
  • README.md: 项目说明文档。
  • index.js: 入口文件。
  • package.json: 项目依赖和脚本配置。
  • pnpm-lock.yaml: pnpm 锁定文件。
  • types/: 生成的 TypeScript 类型定义文件。

• tests/e2e/: 包含项目的端到端测试示例。

  • single-export/: 单组件导出示例。
  • single-export-default-only/: 单组件默认导出示例。
  • multi-export/: 多组件导出示例。
  • multi-export-typed/: 带 JSDoc 注释的多组件导出示例。
  • multi-export-typed-ts-only/: 仅生成 TS 定义的多组件导出示例。
  • glob/: 使用 glob 策略收集和分析 Svelte 文件的示例。
  • carbon/: 完整的 carbon-components-svelte 示例。

• .gitignore: Git 忽略文件。

• .npmignore: npm 忽略文件。

• README.md: 项目说明文档。

• index.js: 入口文件。

• package.json: 项目依赖和脚本配置。

• pnpm-lock.yaml: pnpm 锁定文件。

• types/: 生成的 TypeScript 类型定义文件。

2. 项目的启动文件介绍

项目的启动文件是 index.js，它作为项目的入口文件，负责初始化项目的配置和启动逻辑。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本配置和其他元数据。以下是一些关键配置项：

{
  "name": "sveld",
  "version": "0.20.0",
  "main": "index.js",
  "scripts": {
    "build": "rollup -c",
    "test": "jest"
  },
  "dependencies": {
    "rollup-plugin-svelte": "^7.0.0",
    "@rollup/plugin-node-resolve": "^13.0.0"
  },
  "devDependencies": {
    "sveld": "^0.10.0"
  }
}

rollup.config.js

rollup.config.js 文件用于配置 Rollup 打包工具。以下是一个示例配置：

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import sveld from "sveld";

export default {
  input: "src/index.js",
  output: {
    format: "es",
    file: "lib/index.mjs"
  },
  plugins: [
    svelte(),
    resolve(),
    sveld()
  ]
};

vite.config.js

vite.config.js 文件用于配置 Vite 打包工具。以下是一个示例配置：

import sveld from 'vite-plugin-sveld';

export default {
  plugins: [
    sveld()
  ]
};

通过以上配置文件，可以实现项目的构建、测试和打包等功能。

sveldGenerate TypeScript definitions for your Svelte components项目地址:https://gitcode.com/gh_mirrors/sv/sveld