537.【博客开辟】前端应用开辟情况搭建(可复用)

手机游戏开发者 2024-9-12 04:29:05 92 0 来自 中国
一、约定


  • jsx|tsx 组件文件名利用- 毗连,比方 dimension-reading.tsx
  • 除组件外的其他文件名利用 _,比方 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 模板 -> 提供 <div id="root"></div> 入口点  |- logo.ico  // logo|- src  index.tsx // 步伐入口2级(紧跟在 index.html 背面) -> 提供 ReactDOM.createRoot(...).render(<App/>) 入口点    |- 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 单页应用开辟情况,毕竟自己的发展方向是应用开辟,当有实际需求时,立马能拿出一个根本开辟框架是很有须要的。




  • 第一次扫描时也出现了两个bug,已经修复完毕
PS:搭建过程中用webstorm 的 Run Configuration for TypeScript 插件调试typescript代码时,遇到了debug 不了 ts 文件的题目。缘故起因是: 新安装的 typescripts 版本过高。办理办法是重新安装一下 ts-node 即可:
C:\Users\FENG>npm install -g ts-node@latestC:\Users\FENG\AppData\Roaming\npm\ts-node -> C:\Users\FENG\AppData\Roaming\npm\node_modules\ts-node\dist\bin.jsC:\Users\FENG\AppData\Roaming\npm\ts-node-cwd -> C:\Users\FENG\AppData\Roaming\npm\node_modules\ts-node\dist\bin-cwd.jsC:\Users\FENG\AppData\Roaming\npm\ts-node-script -> C:\Users\FENG\AppData\Roaming\npm\node_modules\ts-node\dist\bin-script.jsC:\Users\FENG\AppData\Roaming\npm\ts-node-esm -> C:\Users\FENG\AppData\Roaming\npm\node_modules\ts-node\dist\bin-esm.jsC:\Users\FENG\AppData\Roaming\npm\ts-node-transpile-only -> C:\Users\FENG\AppData\Roaming\npm\node_modules\ts-node\dist\bin-transpile.jsC:\Users\FENG\AppData\Roaming\npm\ts-script -> C:\Users\FENG\AppData\Roaming\npm\node_modules\ts-node\dist\bin-script-deprecated.jsnpm WARN ts-node@10.9.1 requires a peer of @types/node@* but none is installed. You must install peer dependencies yourself.npm WARN ts-node@10.9.1 requires a peer of typescript@>=2.7 but none is installed. You must install peer dependencies yourself.+ ts-node@10.9.1added 7 packages from 3 contributors, removed 3 packages and updated 10 packages in 1.545sC:\Users\FENG>
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-10-18 18:20, Processed in 0.159401 second(s), 32 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表