537.【博客开发】前端应用开发环境搭建（可复用）

一、约定

1. jsx|tsx 组件文件名使用- 连接，例如 dimension-reading.tsx
2. 除组件外的其他文件名使用 _，例如 random_go.ts

二、文件说明

|- babel.config.json // babel 配置

|- README.MD
 
|- CHANGELOG.MD // 修改历史

|- postcss.config.js // 1.支持 autoprefixer 自动添加浏览器商家前缀；2.支持 px转rem

|- tsconfig.json // typescripts 配置文件

|- webpack.config.js // webpack 配置文件

|- docs
  |- 前端环境搭建.txt
   
|-public
  |- index.html // 程序入口1级 html 模板 -> 提供 
 入口点
  |- logo.ico  // logo
|- src

  index.tsx // 程序入口2级（紧跟在 index.html 后头） -> 提供 ReactDOM.createRoot(...).render() 入口点
  
  |- app
    |- app.tsx  // 程序入口3级（紧跟在 index.tsx 后台） -> 提供 全局通用的框架入口，AppoProvider、Router、ErrorBoundary、Suspense
    |- app.scss // 样式文件，全局且通用的样式可以写在这里
    |- image
      |- loading.gif // 加载中图片
    |- app-apple
      |- app-apple.tsx //程序入口4级（紧跟在 app.tsx 后头） -> 肩负两个功能：1. Context 2. 基础路由 3. react portal
    
  |- commponent
    |- portal // -> react portal 都保存在这儿
    |- common // -> 通用的组件放这儿
    |- init // -> 用于初始化的组件放这儿
    |- view // -> 页面的一部分（待定）
  
  |- pages // 页面组件
  
  |- register-center
    |- context // react context
    |- data-from // api 访问地址存放这儿
    |- graphql // graphql 
      |- graphql-schema // graphql 的 schema 定义
      |- graphql-types // graphql 返回的数据结构定义（typescript type）
    |- route
      |- route-register-center
        |- route-register-center.ts // 路由注册中心
    |- security // 一些安全工具/配置
      |- map-localstorage
        |- map-localstorage.ts // 将保存在浏览器 localstorage 里的key值转换成随机的
        
  |- types // typescripts 类型定义
    |- image.d.ts // image类型
    
  |- utils
    |- security_utils
      |- encrypt_go
        |- setting // 加密公钥
        |- encrypt_go.ts // 使用 jsencrypt 加密
    |- random_char
      |- random_char.ts // 生成随机字符
  

三、特性

1. 支持 React
2. 支持 typescript
3. 支持 scss
4. 支持 调试热更新
5. 支持 graphql
6. 支持 grpc
7. 支持 px2rem
8. 支持 autoprefixer
9. 支持前端rsa加密
10. 支持 markdown 编辑器
11. 支持 PC 端和 MOBILE 端的检测
12. 支持 babel 转换

四、初衷

其实前面也有构建过基础应用环境，但这次想构建一个通用的前端 React 单页应用开发环境，毕竟自己的成长方向是应用开发，当有实际需求时，立马能拿出一个基础开发框架是很有必要的。

gitlab 代码

sonarqube扫描结果

• 第一次扫描时也出现了两个bug，已经修复完毕

---

PS：搭建过程中用webstorm 的 Run Configuration for TypeScript 插件调试typescript代码时，遇到了debug 不了 ts 文件的问题。原因是: 新安装的 typescripts 版本过高。解决办法是重新安装一下 ts-node 即可：

C:\Users\FENG>npm install -g ts-node@latest
C:\Users\FENG\AppData\Roaming\npm\ts-node -> C:\Users\FENG\AppData\Roaming\npm\node_modules\ts-node\dist\bin.js
C:\Users\FENG\AppData\Roaming\npm\ts-node-cwd -> C:\Users\FENG\AppData\Roaming\npm\node_modules\ts-node\dist\bin-cwd.js
C:\Users\FENG\AppData\Roaming\npm\ts-node-script -> C:\Users\FENG\AppData\Roaming\npm\node_modules\ts-node\dist\bin-script.js
C:\Users\FENG\AppData\Roaming\npm\ts-node-esm -> C:\Users\FENG\AppData\Roaming\npm\node_modules\ts-node\dist\bin-esm.js
C:\Users\FENG\AppData\Roaming\npm\ts-node-transpile-only -> C:\Users\FENG\AppData\Roaming\npm\node_modules\ts-node\dist\bin-transpile.js
C:\Users\FENG\AppData\Roaming\npm\ts-script -> C:\Users\FENG\AppData\Roaming\npm\node_modules\ts-node\dist\bin-script-deprecated.js
npm WARN [email protected] requires a peer of @types/node@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>=2.7 but none is installed. You must install peer dependencies yourself.

+ [email protected]
added 7 packages from 3 contributors, removed 3 packages and updated 10 packages in 1.545s

C:\Users\FENG>