LittleC
技术学习记录
技术交流学习
在CRA上套一层Electron

背景

原来是用 https://github.com/electron-react-boilerplate/electron-react-boilerplate 勉强苟活类型推断的,但是写了一半发现,外部包的自动补全基本没有

通过观察package.json,看来是用flow-typed进行类型补全的,但一看material-ui的官网,我感觉社区咕了,看来只能用其他方法体验typescript的爽感(指用any)

寻找新方法

在谷歌搜索electron react typescript boilerplate这几个关键字,发现有两个仓库虽然是在 electron-react-boilerplate 的基础上修改的,但好像年久失修,不敢使用。

在不断的寻找中,发现能把create-react-app中的代码套一层Electron,以达到类似的效果,听起来也方便,于是就才用了这一种方法。在指定--template typescript创建项目后,参考这个仓库,补充了相应的启动文件和包,之后就能成功启动纯净的react+ts+electron环境

一些小问题

成功启动之后就是干一些奇奇怪怪的事,比如检查各种包是否正常,这时候出现一些非常迷惑的事,比如获取用户目录异常

无法正确写入文件等

经过搜索( https://github.com/facebook/create-react-app/issues/6782 ),错误的原因大概为CRA的本意是在浏览器中运行,所以禁用了fs,net,tls等网页上无法正确调用的库,所以在此出错。根据issue中的讨论,解决方法为yarn eject获得webpack配置文件后再做修改或者使用craco覆盖原有的webpack配置文件。

我怕eject后,cra升级比较麻烦,所以选择的后者,步骤为 yarn add -D @craco/craco,创建 craco.config.js 文件,在其中添加

module.exports = {
    webpack: {
        configure: {
            target: 'electron-renderer'
        }
    }
};

package.json中的startreact-scripts test改成craco start即可
P.S: 本来想用github gist分享代码的,但是发现国内好像没法正常访问?

真香

代码备份防止仓库暴毙

https://cdn.jsdelivr.net/gh/XxLittleCxX/static@20.01.21/react-typescript-electron-sample-with-create-react-app-and-electron-builder-master.zip

技术交流学习

在CRA上套一层Electron
背景 原来是用 https://github.com/electron-react-boilerplate/electron-react-boilerplate 勉强苟活类型推断的,但是写了一半发现,外部包的自动补全基本没有 通过观察packa…
扫描二维码继续阅读
2020-01-21