这是我参与「第四届青训营 」笔记创作活动的第七天
react+electron的开发环境搭建
在上一篇文章里我提到了electron的一些小小的坑，但又没有讲我的开发过程，显得有点不真诚，于是在下了火车，回到学校后，我觉得写一篇文章，稍微表述一下一些开发过程，以免朋友们说我光说不练，只会嘴炮
开整！
为什么需要一个脚手架：
其实之前已经提到了，现在已有很多的品质不错的脚手架可供使用，那为什么还要自己搭呢？
哎，因为我不会ts，github上的那个用不了……
然后是小应用，字节的modernjs用起来有点浪费
于是，自己动手丰衣足食吧
搭建react：
这个自然是非常简单了
npx create-react-app your-project-name
啪的一下就好了
如果有问题检查一下网络，看一下报错信息，google或者百度一下应该就可以了
搭建electron：
安装：
npm install --save-dev electron
-dev是必需的，否则打包时会报错
为什么不用electron的脚手架呢
因为electron其实类似一个浏览器，装一个页面进去就好了，当然弊端也很明显，如果需要一个新的窗体，就需要重新配置了（这也算是electron的一个弊端吧）
配置main文件：
根据electron官网上的文档走就好，在loadURL处略作调整：http://localhost：3000，当然此处为生产环境的配置，在打包时再做其他配置处理
在package.json中也需要一定修改，添加main：main.js
启动应用：
react启动用npm run start
electron启动用electron .
然后就启动起来了，yes
然鹅，这很不优雅，一次开发启动两条命令，不爽栽
于是， 把这两个缝合起来就变得尤为重要了
怎么缝呢？npm必不可少：
第一位选手：concurrently：一次可以运行n条命令的狠角色，
然而，我们都知道electron需要在react加载后再加载才会有画面（load的是react的端口），要是react不加载，那就啥也没有，嗯，怎么办呢？
第二位选手：wait-on： 可以等等的npm包
然后，package.json中添加如下命令：
"dev": "concurrently "wait-on http://localhost:3000 && electron ." "npm start""
运行npm run dev，就可以得到一个比较好的开发体验了，然而，……发现了没有，浏览器还会打开一次，这就很烦了，那怎么办呢？ban掉浏览器就好啦，怎么ban呢？
哎，第三位选手：cross-env：可以跨端的好工具
给npm start前添加cross-env BROWSER=none
再次启动，浏览器就不会出现了，完美
electron热更新：
react的脚手架自带webpack，热更新不必我们操心，然而electron却没有，那就意味着我们更改完main.js后无法热更新看到内容，这显然不够高效，那怎么办呢？
继续来个包：
nodemon：可以监听文件变化的一个包，用途非常广泛
添加
"hes": "nodemon --watch main.js --exec "electron ."",
来一个npm run hes
perfect！
当然，如果electron的menu等新文件创建后，也需要在hes命令里加入
总结：
经过一系列的折腾，可以配置出一个不错的electron开发环境，但是，引入了大量的npm包，同时也有些大才小用……
所以阿，还是考虑使用一些正经的脚手架吧（逃）
当然，后续打包还是需要自己去学一下electron-builder，然后配置一下的~为什么不写呢？因为我也不会……
