对于electron-react-boilerplate(ERB)的学习笔记(legacy)

 

2 electron-react-boilerplate的复制

2.1 查看node.js版本号

node -v

3 运行调试

3.1 启动调试—— yarn dev

我们使用“yarn dev”命令来启动项目的调试；

yarn dev实际上调用的是package.json的“dev”脚本，截图如下：

yarn是由Facebook开发的Javascript 包管理器，在这里，我们使用yarn作为脚手架搭建的工具；

3.1.1 代码的执行顺序——“主程序的函数入口”

yarn dev --
"dev": "cross-env START_HOT=1 node -r @babel/register ./internals/scripts/CheckPortInUse.js && cross-env START_HOT=1 yarn start-renderer-dev"
# 以上是dev脚本的执行代码
===========>  yarn start-renderer-dev

cross-env START_HOT=1 yarn start-renderer-dev --
"start-renderer-dev": "cross-env NODE_ENV=development webpack-dev-server --config configs/webpack.config.renderer.dev.babel.js"
===========> configs/webpack.config.renderer.dev.babel.js

configs/webpack.config.renderer.dev.babel.js --
devServer: {
    // devServer是webpack-dev-server的写作范式，所以这段代码是一定会被执行的
    port,
    publicPath,
    compress: true,
    noInfo: false,
    stats: 'errors-only',
    inline: true,
    ...
}
# 其中，devServer是webpack-dev-server的写作范式，所以这段代码是一定会被执行的

说明：

cross-env START_HOT=1 --- 这里将环境变量START_HOT设置为1；

其中cross-env是一款运行跨平台设置和使用环境变量的脚本，用来解决跨平台环境变量的设置问题。

3.1.2 src/index.html——主页面入口

index.html是程序的主页面入口；

在main.dev.ts中有这样的代码，

可以看到这里使用“index.html”作为入口文件；

3.1.2 ../app/index.tsx——主程序入口

index.tsx是主程序的入口文件；

在index.tsx中使用了Root控件作为根节点控件，

3.1.3 <Root/>——./containers/Root.tsx

<Root/>是根节点控件，其代码文件是Root.tsx；

4 目录结构

4.1 package.json——项目的配置信息

4.2 App.global.css——全局样式文件

4.2.1 设置背景颜色——body.background

代码如图所示，

旧版本备注：

app/app.global.css——项目的全局样式文件

5 代码写作

5.1 样式文件写作

ERB使用了一种很酷的技术来实现样式的引入，具体是这样子的

它会首先将样式文件生成一个类似于“类”封装，然后通过字典的方式实现调用；

5 Error信息说明

5.1 SimpleURLLoaderWrapper相关的错误

错误信息的具体内容是这样的：

这里有两个关键字：ERROR_CONNECTION_TIMED_OUT和SimpleURLLoaderWrapper，

So I infer that this might be caused by the firewall, so I tried using the global network to run the command "yarn dev",

然后果然错误就消失了，

错误内容1：

Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times

错误内容2：

Error: net::ERR_CONNECTION_TIMED_OUT
    at SimpleURLLoaderWrapper.<anonymous> (electron/js2c/browser_init.js:2571:21)
    at SimpleURLLoaderWrapper.emit (events.js:223:5)

这两个错误信息都消失了；

所以以后遇到这种错误不用担心，这是网络连接的不稳定引起的；