Svelte-Notifications 开源项目教程

Svelte-Notifications 开源项目教程

svelte-notificationsSimple and flexible notifications system项目地址:https://gitcode.com/gh_mirrors/sv/svelte-notifications

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

Svelte-Notifications 项目的目录结构如下：

svelte-notifications/
├── example/
├── public/
├── src/
│   ├── components/
│   ├── stores/
│   ├── types/
│   ├── index.d.ts
│   ├── main.ts
│   └── styles.css
├── .browserslistrc
├── .eslintrc
├── .gitignore
├── .npmignore
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── cypress.config.cjs
├── index.d.ts
├── package-lock.json
├── package.json
├── rollup.config.js

目录介绍

• example/: 包含项目的示例代码。
• public/: 包含公共资源文件。
• src/: 包含项目的源代码。
  • components/: 包含 Svelte 组件。
  • stores/: 包含状态管理相关的文件。
  • types/: 包含 TypeScript 类型定义。
  • index.d.ts: 项目类型声明文件。
  • main.ts: 项目入口文件。
  • styles.css: 项目样式文件。
• .browserslistrc: 配置目标浏览器版本。
• .eslintrc: 配置 ESLint 规则。
• .gitignore: 配置 Git 忽略的文件和目录。
• .npmignore: 配置 npm 忽略的文件和目录。
• CONTRIBUTING.md: 贡献指南。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• cypress.config.cjs: Cypress 测试配置文件。
• index.d.ts: 项目类型声明文件。
• package-lock.json: npm 依赖锁定文件。
• package.json: 项目配置文件。
• rollup.config.js: Rollup 打包配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/main.ts，该文件负责初始化项目并启动应用。以下是 main.ts 的示例代码：

import App from './App.svelte';

const app = new App({
  target: document.body,
});

export default app;

启动文件介绍

• import App from './App.svelte': 导入主应用组件。
• const app = new App({ target: document.body }): 创建一个新的 Svelte 应用实例，并将其挂载到 document.body。
• export default app: 导出应用实例。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的元数据和依赖信息。以下是部分关键配置：

{
  "name": "svelte-notifications",
  "version": "1.0.0",
  "scripts": {
    "dev": "rollup -c -w",
    "build": "rollup -c",
    "start": "sirv public"
  },
  "dependencies": {
    "svelte": "^3.0.0"
  },
  "devDependencies": {
    "rollup": "^2.0.0",
    "sirv-cli": "^1.0.0"
  }
}

配置文件介绍

• name: 项目名称。
• version: 项目版本。
• scripts: 定义了项目的脚本命令，如 dev、build 和 start。
• dependencies: 项目运行时的依赖。
• devDependencies: 开发时的依赖。

rollup.config.js

rollup.config.js 文件是 Rollup 的配置文件，用于打包项目。以下是部分关键配置：

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLL

svelte-notificationsSimple and flexible notifications system项目地址:https://gitcode.com/gh_mirrors/sv/svelte-notifications