react-tmap 项目使用教程

react-tmap 项目使用教程

react-tmap一个基于腾讯地图JavaScript API GL、TypeScript 封装适用于 react 的高性能地图组件库项目地址:https://gitcode.com/gh_mirrors/re/react-tmap

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

react-tmap/
├── docs/
│   └── ...
├── src/
│   ├── components/
│   │   └── ...
│   ├── utils/
│   │   └── ...
│   └── ...
├── .editorconfig
├── .fatherrc.ts
├── .gitignore
├── .prettierignore
├── .prettierrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── README.zh_CN.md
├── buildconfig.json
├── package-lock.json
├── package.json
├── tsconfig.json
└── typings.d.ts

• docs/: 存放项目文档文件。
• src/: 项目源代码文件夹，包含组件、工具函数等。
• src/components/: 存放地图组件。
• src/utils/: 存放工具函数。
• .editorconfig: 编辑器配置文件。
• .fatherrc.ts: 构建工具配置文件。
• .gitignore: Git忽略文件配置。
• .prettierignore: Prettier忽略文件配置。
• .prettierrc: Prettier配置文件。
• CHANGELOG.md: 版本变更日志。
• LICENSE: 项目许可证。
• README.md: 项目英文介绍文档。
• README.zh_CN.md: 项目中文介绍文档。
• buildconfig.json: 构建配置文件。
• package-lock.json: npm依赖锁定文件。
• package.json: 项目依赖和脚本配置文件。
• tsconfig.json: TypeScript配置文件。
• typings.d.ts: TypeScript类型定义文件。

2. 项目的启动文件介绍

项目的启动文件主要是 package.json 中的 scripts 部分。以下是常用的启动命令：

{
  "scripts": {
    "start": "npm run dev",
    "dev": "father dev",
    "build": "father build",
    "test": "father test",
    "lint": "father lint"
  }
}

• npm start 或 npm run dev: 启动开发服务器。
• npm run build: 构建项目。
• npm run test: 运行测试。
• npm run lint: 代码格式检查。

3. 项目的配置文件介绍

.fatherrc.ts

fatherrc.ts 是项目的主要配置文件，用于配置构建工具 father。以下是一个示例配置：

import { defineConfig } from 'father';

export default defineConfig({
  esm: { input: 'src' },
  cjs: { input: 'src' },
  umd: { name: 'reactTmap', input: 'src' },
  extraBabelPlugins: [
    ['babel-plugin-import', { libraryName: 'antd', style: true }]
  ],
  extraBabelPresets: [
    '@babel/preset-react'
  ],
  alias: {
    '@': './src'
  },
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
});

tsconfig.json

tsconfig.json 是 TypeScript 的配置文件，用于配置 TypeScript 编译选项。以下是一个示例配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["dom", "es2015"],
    "jsx": "react",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

package.json

package.json 是项目的依赖和脚本配置文件。以下是一些关键配置：

{
  "name": "react-tmap",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist

react-tmap一个基于腾讯地图JavaScript API GL、TypeScript 封装适用于 react 的高性能地图组件库项目地址:https://gitcode.com/gh_mirrors/re/react-tmap