开源项目 `globe.gl` 使用教程

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

globe.gl 项目的目录结构如下：

globe.gl/
├── dist/
│   ├── globe.gl.min.js
│   ├── globe.gl.mjs
│   └── globe.gl.d.ts
├── src/
│   ├── css/
│   └── ...
├── package.json
└── ...

目录介绍

• dist/：包含项目的构建输出文件，如 globe.gl.min.js 和 globe.gl.mjs，以及类型定义文件 globe.gl.d.ts。
• src/：包含项目的源代码，其中 css/ 目录包含样式文件。
• package.json：项目的配置文件，包含项目的基本信息、依赖项等。

2. 项目的启动文件介绍

项目的启动文件主要是 dist/globe.gl.min.js 和 dist/globe.gl.mjs。这两个文件是构建后的输出文件，用于在浏览器中加载和使用 globe.gl 组件。

启动文件介绍

• globe.gl.min.js：压缩后的UMD模块，适用于直接在HTML中引入。
• globe.gl.mjs：ES模块版本，适用于现代JavaScript环境。

3. 项目的配置文件介绍

项目的配置文件是 package.json，其中包含项目的基本信息、依赖项、构建配置等。

package.json 配置介绍

{
  "name": "globe.gl",
  "version": "2.32.5",
  "description": "UI component for Globe Data Visualization using ThreeJS/WebGL",
  "type": "module",
  "unpkg": "dist/globe.gl.min.js",
  "jsdelivr": "dist/globe.gl.min.js",
  "main": "dist/globe.gl.mjs",
  "module": "dist/globe.gl.mjs",
  "types": "dist/globe.gl.d.ts",
  "exports": {
    "types": "./dist/globe.gl.d.ts",
    "umd": "./dist/globe.gl.min.js",
    "default": "./dist/globe.gl.mjs"
  },
  "sideEffects": [
    "./src/*.css"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/vasturiano/globe.gl.git"
  },
  "keywords": [
    "webgl",
    "three",
    "globe",
    "geo",
    "spherical",
    "projection",
    "orthographic"
  ],
  "author": {
    "name": "Vasco Asturiano"
  }
}

配置项介绍

• name：项目名称。
• version：项目版本。
• description：项目描述。
• type：模块类型，这里指定为ES模块。
• unpkg 和 jsdelivr：CDN链接，用于直接在浏览器中加载项目。
• main 和 module：指定主要的入口文件。
• types：类型定义文件的路径。
• exports：模块的导出配置。
• sideEffects：指定具有副作用的文件。
• repository：项目的仓库地址。
• keywords：项目的关键词。
• author：项目作者。

以上是 globe.gl 开源项目的目录结构、启动文件和配置文件的详细介绍。希望这份教程能帮助你更好地理解和使用该项目。