co-play开发记录

项目是基于electron8.0开发，2020.3.28进行重构。整个过程中遇到的问题记录如下：

原始版记录(electron+jquery)

关于electron
在开发的过程中才突然明白main和renderer的区别。主进程相当于是浏览器，可以控制浏览器的各种行为，renderer进程相当于是每一个页面，换句话说，每一个html中引入的js文件所在环境是renderer进程，而创建这个html窗口的js所在环境是主进程。
引入了jquery和bootstrap的样式：
引入样式没什么好说的，页面引入jquery的时候提示$不存在，
参考jquery源码，electron执行环境为node，使用commonJS模块化标准，node环境没有window对象，这种情况下，jquery将导出到module.exports对象上，需要手工绑定到当前的window窗口，即可解决。
socketio:
在客户端进行emit，如果需要知道提交之后的结果，可以在第三个参数上写回调函数，在服务器端监听事件之后调用回调函数，使得客户端执行相应的行为。
犯蠢： jsx写习惯了忘了html是怎么写的了，javascript引入的格式写错了。。
本地存储：
使用了electron-store，因为是多页面需要共用状态，所以我单独写了个js模块，导出一个新的store对象，并对这个对象进行操作。
electron-store是操作本地磁盘的，所有写在上面的数据都和磁盘文件相对应，因此退出时需要进行store.clear()删除缓存。
犯蠢：for in 和for of， for in迭代的是key， for of迭代的是value
打包：
参考了很多文章，一开始使用electron-packager这个包，结果卡住不动，换源也没用（淘宝源的路径不对）；
然后换成electron-builder，手动下载包到缓存路径，总算生成了未打包但是能运行的文件夹，但是还是报一个Fatal error: Unable to commit changes的错误，导致错误的原因是电脑自带的杀毒软件。。。。。关闭macfee就好了。。。
服务器：
nodejs+express+socketio，体验还好。就是自己代码组织的不怎么样。
document.querySelector()这个函数，如果找不到返回的是null，我当成了undefined来判断，所以出错了。
渲染进程中的sendSync()这个函数，如果等不到返回值，会一直卡着，直到等到返回值，因为是同步的。

重构记录(electron+react)

安装electron
渲染进程require electron出错，TypeError: fs.existsSync is not a function，原因是没有nodejs环境。解决：
渲染进程：
1
const { ipcRenderer } = window.require('electron');
主进程：
1
2
3
4
5
const win = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
})
从而为electron工程提供了node环境，但是如果直接从浏览器打开3000端口，则会报错。因为浏览器没有node环境
引入了ant design库，但是好像没有按需加载，之后再说吧，咕咕咕。
用hooks实现了一个简单的状态管理，暂时也用不到本地存储，就没装electron-store库。

打包，需要同时指定：

1
2
3

registry=https://registry.npm.taobao.org/
electron_custom_dir=8.2.0
electron_mirror=http://npm.taobao.org/mirrors/electron/

才可以。如果不写第三个，会自己去github找，然后就报错了。

打包需要打包主进程和渲染进程 main和render,因此打包时两个都要在同一个文件夹内。打包的内容可以最小化，只包含react build之后的dist和主进程main
服务端重写了一下逻辑，这次看着舒服多了。
可以自动化的点：
根据运行环境是生产模式还是开发环境，这决定了程序的入口(奈何webpack还没学会)

客户端源码指路(readme都没写，不愧是我)