Svelte-LeafletJS 项目启动与配置教程

1. 项目目录结构及介绍

Svelte-LeafletJS 项目目录结构如下所示：

svelte-leafletjs/
├── public/             # 公共目录，包含静态文件如HTML、CSS、JavaScript等
│   ├── index.html       # 项目入口HTML文件
│   └── ...
├── src/                # 源代码目录
│   ├── components/     # Svelte组件目录
│   │   ├── Map.svelte   # Leaflet地图组件
│   │   └── ...
│   ├── main.js          # Svelte入口文件
│   ├── routes/         # 路由目录（如果有的话）
│   │   └── ...
│   ├── stores/         # 状态管理目录（如果有的话）
│   │   └── ...
│   └── ...
├── package.json        # 项目配置文件
├── Rollup.config.js    # Rollup打包配置文件
└── ...

• public/: 包含项目的公共文件，如入口HTML文件和其他静态资源。
• src/: 包含所有Svelte组件和主要的JavaScript代码。
  • components/: 存放所有的Svelte组件。
  • main.js: Svelte的入口文件，用于启动应用。
  • routes/: 如果项目使用了路由，该目录将包含路由配置。
  • stores/: 如果项目使用了状态管理，该目录将包含状态管理相关代码。
• package.json: 包含项目依赖和脚本。
• Rollup.config.js: Rollup的配置文件，用于打包和构建项目。

2. 项目的启动文件介绍

项目的启动文件为 src/main.js。以下是启动文件的基本结构：

import App from './App.svelte';

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

export default app;

此文件导入根组件 App.svelte 并在 document.body 中创建其实例，从而启动Svelte应用。

3. 项目的配置文件介绍

项目的配置文件为 package.json。以下是配置文件的一些基本配置项：

{
  "name": "svelte-leafletjs",
  "version": "1.0.0",
  "scripts": {
    "start": "rollup -c -w",  // 启动开发服务器
    "build": "rollup -c"      // 构建生产版本
  },
  "dependencies": {
    "svelte": "^3.38.2",
    "svelte-leaflet": "^0.1.6",
    "leaflet": "^1.7.1"
  },
  "devDependencies": {
    "rollup": "^2.33.1",
    "svelte-preprocess": "^4.0.0",
    "rollup-plugin-svelte": "^6.0.0",
    "rollup-plugin-terser": "^7.0.0"
  }
}

在 scripts 部分，定义了两个脚本：

• start: 使用Rollup配置文件（rollup.config.js）启动开发服务器，并且使用 -w 参数来监视文件变化。
• build: 使用Rollup配置文件构建生产版本的应用程序。

dependencies 部分列出了项目依赖，包括Svelte、Svelte-Leaflet 和 Leaflet。

devDependencies 部分列出了开发依赖，包括Rollup、Svelte预处理器、Rollup的Svelte插件和Rollup的压缩插件。