# react-ts-app

**Repository Path**: coder128/react-ts-app

## Basic Information

- **Project Name**: react-ts-app
- **Description**: 创建一个ts版本的react服务端程序
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-29
- **Last Updated**: 2022-09-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-ts-app
> 很多electron项目从搭建到运行是比较耗时的，这个项目很小，基于electron + webpack5 + typescript + react 搭建的一个桌面端开发环境，让react可以直接调用nodejs代码，省掉了大量的配置时间，直接拉取下去install就可以用了


## 安装
安装很简单，直接执行yarn或者npm的``install``命令即可，以npm为例子，默认使用的npmjs的源，如果嫌速度慢可以使用淘宝镜像  ``shell: npm config set registry https://registry.npm.taobao.org/``
```shell
npm install
```
这样耐心等待安装完成即可

## 目录结构
在目录结构里的内容可以根据自己的喜好自定义，但别引入错误哦
```javascript
    dist // 打包输出目录，electron 运行的文件就是基于这个目录
    output // 输出打包后的文件夹
    src // 源代码文件夹，负责整个业务的编写
    - render // electron 的专属目录，这个可以放electron 相关的东西
    - assets // 图片，字体，视频等静态资源存储目录
    - public // 目前存储index.html的目录 专门存储公开文件的文件夹，也可以存公共代码
    - addons // 扩展代码的目录，大部分的时候，放三方小模块
    - App.jsx // 主入口组件
    - index.jsx // 主入口jsx文件
```

## 关于``public`` 文件夹
这个文件夹的所有文件都会复制到根目录(``dist目录``)，如果碰到相同的文件，编译则会报错，因为冲突为了保证文件内容的正确，是不能相冲突的，冲突会提示
```shell
ERROR in Conflict: Multiple assets emit different content to the same filename xxxx.xxx
```

## 概念
electron是和这个结构差不多的，这边概念和官网也是差别不大，感兴趣可以去官网看看，下文来介绍概念
### 主进程
一个程序只有一个主进程，因此主进程约定在 ``src/render/main.ts``

### 渲染器进程
每个在``src/render``目录外的程序被称为渲染线程，他是负责处理页面逻辑的

### 预加载脚本​
在 ``src/render/preload.ts``是预加载脚本，在这个文件中也可以引入其他文件来达到扩展的目的

## electron速度慢问题
因为electron要下载编译环境，服务器也是外国的，所以中国访问速度是很慢的，甚至很大时候可能不成功，这样就需要下面的安装方式了(这个在官网也有说明) ，这边推荐淘宝镜像 ``ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"`` 官网链接： [https://www.electronjs.org/zh/docs/latest/tutorial/installation](https://www.electronjs.org/zh/docs/latest/tutorial/installation)
```shell
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
npm config set ELECTRON_BUILDER_BINARIES_MIRROR http://npm.taobao.org/mirrors/electron-builder-binaries/
npm install
```

## 运行
运行很简单，如果想看更多命令可以在``package.json``内查看
```shell
# 首先进行webpack打包，在参数后面加个 -w 这样文件变化会自动打包，速度更快
node setup.js
```
之后直接会弹出一个程序窗口，代表以及搭建成功
## 多个js打包
如果想打包多个js，可以在``webpack.config.js``的``entry``里自己新建一个一个入口，与上面的一致，添加完成就可以直接运行了

## 打包应用程序
本应用提供了快捷打包的命令，使用``npx vapp``可以实现快速打包编译，具体可以输入``--help``进行查看