# WebGISBuilder **Repository Path**: mapleegiser/web-gisbuilder ## Basic Information - **Project Name**: WebGISBuilder - **Description**: 模块化管理的一个WebGIS框架 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 5 - **Forks**: 0 - **Created**: 2021-07-07 - **Last Updated**: 2024-02-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 🚀 项目技术栈和核心文件 --- 🛬 `项目主体文件夹` ├── README.md ├── config ├── coverage ├── dist ├── jest.config.js ├── node_modules ├── package-lock.json ├── package.json ├── postcss.config.js ├── scripts ├── src ├── tests ├── tsconfig.json ├── webpack.config.js ├── yarn.lock └── task.todo ## 为什么要做WebGIS 工程化 ### 1.提升团队建设质量 - 提高开发质量 - 完善开发流程 - 提升团队技术 ### 2.构建健全的WebGIS体系 ### 3.促进技术成果的输出 ## 开发部分 👷 ### ④ 👱现有的技术栈 #### GIS技术栈 Openlayers + GeoServer/deckgl + postgis ##### GIS核心技术 - svg canvas二维 WebGL三维 渲染器 - 坐标系转换 - 空间索引 #### Web技术栈 ES6/TypeScript + React + Node.js + Recoil + Jest + Storybook + Nest.js +CLI ##### Web核心技术 | 核心技术 | 情况说明 | | ---------------- |------------------------------------------------------------ | | babel-loader | 生态丰富、直接导致 webpack 变慢 | | esbuild-loader | 构建速度确实很快，但是tree shaiking的理念和webpack区别很大 | | @reach/router | 相对于官方的react-router简洁方便 | | react-hot-loader | 如果项目大了刷新特别卡顿一步到位[react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) | | react-query | 组件内进行大部分业务逻辑是请求数据填充数据直接上手 | | react-hook-form | 当系统中出现了大量的表单操作的时候直接可以上手该应用 | ### ②🍌 ts.config具体配置选项 | 配置参数 | 参数说明 | | -------------------------------- | ------------------------------------------------------------ | | incremental | 增量编译 | | outDir | 重定向输出目录 | | target | 指定ECMAScript目标版本 | | module | 指定生成哪个模块系统代码 | | `lib` | 编译过程中需要引入的库文件的列表 | | sourceMap | 生成相应的 .map文件 | | importHelpers | 从 [`tslib` ](https://www.npmjs.com/package/tslib)导入辅助工具函数（比如 `__extends`， `__rest`等） | | `declaration` | 生成相应的 `.d.ts`文件。 | | `rootDir` | 仅用来控制输出的目录结构 | | `strict` | 启用所有严格类型检查选项 | | `noUnusedLocals` | 若有未使用的局部变量则抛错 | | `noUnusedParameters` | 若有未使用的参数则抛错 | | `noImplicitReturns` | 不是函数的所有返回路径都有返回值时报错。 | | noFallthroughCasesInSwitch | 报告switch语句的fallthrough错误 | | allowJs | 允许编译javascript文件 | | `jsx` | 在 `.tsx`文件里支持JSX： `"React"`或 `"Preserve"` | | moduleResolution | 决定如何处理模块 | | baseUrl | 解析非相对模块名的基准目录。 | | forceConsistentCasingInFileNames | 禁止对同一个文件的不一致的引用 | | `esModuleInterop` | 引用的时候带不带* | | `suppressImplicitAnyIndexErrors` | 阻止 `--noImplicitAny`对缺少索引签名的索引对象报错。 | | `allowSyntheticDefaultImports` | 允许从没有设置默认导出的模块中默认导入 | | experimentalDecorators | 启用实验性的ES装饰器。 | | `noImplicitAny` | 允不允许any | | `noImplicitThis` | 当 `this`表达式的值为 `any`类型的时候，生成一个错误。 | | `noImplicitAny` | 允不允许any | | `typeRoots` | 要包含的类型声明文件路径列表。 | | | | ##### `CLI的具体技术栈` - Commander.js - Blessed - ShellJS - Inquirer.js - Enquirer - Hotel - Ink - Chalk - fx - Quicktype - dts-gen - yargs - TypeStat ### ⑤ 🐻 Webpack现有优化手段(1、2、3、4、10) 1. 单线程 loader多线程 实际上不然（swc-loader）很早以前parallel-webpack 2. 压缩话题 esbuild -> vite TerserPlugin多线程 treeshaking -> prepack 预执行 3. 缓存 cache-loader独立loader + hard-source-webpack-plugin 4. 核心 集群编译 scripty ssh a/build.sh ssh b/a.sh scp -> 拷贝回本机 -> CI 5. 缩小文件查找范围 loaders-> include: path.resolve(__dirname, '../src'), modules -> resolve: { ​ noParse: /react\.production\.min\.js$/, ​ modules: [path.resolve(__dirname, 'node_modules')] ​ } mainFields -> mainFields: ['main'], alias -> import react from "react";alias: { 'react': ".../react/dist/xxx.js"} resolve: { extensions: ['.tsx', '.ts', '.js'], }, 6.ForkTsCheckerWebpackPlugin tsc检查文件类型耗时一个操作 Eslint 7.关掉系统一些默认的东西 babel->modules:False 8.注意tree-saking { "name": "xxx", "sideEffects": [ "*.css" ], } cssnano自动 10.splitChunks（分析生成的模块）+ externals ### ⑥ 🐻 Webpack分包核心 | 核心技术 | 情况说明 | | ---------------- | ------------------------------------------------------------ | | babel-loader | 生态丰富、直接导致 webpack 变慢 | | esbuild-loader | 构建速度确实很快，但是tree shaiking的理念和webpack区别很大 | | @reach/router | 相对于官方的react-router简洁方便 | | react-hot-loader | 如果项目大了刷新特别卡顿一步到位[react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) | | react-query | 组件内进行大部分业务逻辑是请求数据填充数据直接上手 | | react-hook-form | 当系统中出现了大量的表单操作的时候直接可以上手该应用 | ### ②🍌 ts.config具体配置SplitChunks选项 | 配置参数 | 参数说明 | | ---------------------- | ------------------------------------------------------------ | | chunks | 默认就是async只提取异步的包 import('xxx') | | | initial 提取同步和异步 import xx from "xx" | | | All 不管是同步还是异步 统一的打包到一个 | | minSize | 规定被提取的模块在压缩前的大小最小值 30kb 只有超过了30kb才会提取 | | maxSize | 这个是生成后大小不能超过它。超过了就进行分割 默认是0 不限制 | | minChunks | 最小引用次数 | | maxAsyncRequests | 最大的按需（异步加载次数）6 | | maxInitialRequests | 打包后的入口文件加载时，还能同时加载JS文件的数量（包括入口）默认 | | | 【你自己设置出来优先级】maxInitialRequests、maxAsyncRequests < maxSize < minSize | | automaticNameDelimiter | Index~src~test.js 分割符 import("/*魔法注释*/ a.js") 0.js ->魔法注释.js | | name | 打包出来的项目名称 | | cacheGroups | 核心重点 配置提取模块的方案 里面每一项都是一个方案。其余跟上面方案保持一致 | | test | 相对较少 只匹配你的规则 | | priority | 提取方案的优先级 设置越大 优先采取 | | reuseExistingChunk | 提取模块的时候如果模块存在直接复用硬盘上的 | | enforce | webpack -loader一样 设置为true 忽略外部minSize，minChunks，maxAsyncRequests和maxInitialRequestsminSize，minChunks，maxAsyncRequests和maxInitialRequests | ### 开发工具 #### quicktype ##### 安装 多个项目可能都会用到，所以安装全局即可 ``` npm install -g quicktype ``` ##### 使用方式 ``` # Run quicktype without arguments for help and options quicktype # quicktype a simple JSON object in C# echo '{ "name": "David" }' | quicktype -l csharp # quicktype a top-level array and save as Go source echo '[1, 2, 3]' | quicktype -o ints.go # quicktype a sample JSON file in Swift quicktype person.json -o Person.swift # A verbose way to do the same thing quicktype \ --src person.json \ --src-lang json \ --lang swift \ --top-level Person \ --out Person.swift # quicktype a directory of samples as a C++ program # Suppose ./blockchain is a directory with files: # latest-block.json transactions.json marketcap.json quicktype ./blockchain -o blockchain-api.cpp # quicktype a live JSON API as a Java program quicktype https://api.somewhere.com/data -o Data.java ```