云存储客户端(1) 基础环境搭建

从 2020 年初到现在已经开坑了快一年了。其实我最初想做一个完全模仿百度网盘的客户端程序,那时候还是 2019 年年初的时候,最初就是想做一个客户端,用来上传静态的网站到七牛云方便一些,以下是软件的截图。

图片

当时也只是想做一做玩一玩,基本功能做完之后也就没有什么进度了。知道今年年初的时候才有个想法把这个客户端完善一下。下面是新坑的页面截图:

图片

图片

图片

开坑 oss-client:基础环境搭建

使用 electron-forge

electron-forge是用于创建,发布和安装现代Electron应用程序的完整工具,electron forge 官网。二话不说直接上手搞。

使用官方推荐的脚手架工具和内置的模板

1
npx create-electron-app oss-client --template=typescript-webpack

初始化的过程还是很愉快的,至少我在初始化的时候没有遇到什么大坑,如果 npm 默认的源比较慢的话,推荐这个华为云镜像。还有一个需要注意的是 Windows 上安装 node-gyp 出现问题的话可以看一下这篇文章,一般来说 Windows 电脑上只要安装了 visual studio 和 python2.7 的话 electron 环境是没有什么问题的。
这个框架是官方默认的 webpack + typescript 配置。如果电脑上安装了 yarn 的话 electronforge 会默认使用 yarn 来初始化项目的。下面我们默认使用 yarn 来创建开发环境。下面是初始化完成后的目录结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
│  .eslintrc.json               - eslint 配置文件
│ .gitignore - git 忽略的配置文件
│ package.json - npm 项目的配置文件
│ tsconfig.json - typescript 配置文件
│ webpack.main.config.js - electron 中主线程的 webpack 配置
│ webpack.plugins.js - electronforge 配置插件列表
│ webpack.renderer.config.js - electron 渲染进程的 webpack 配置
│ webpack.rules.js - electronforge 配置文件
│ yarn.lock - yarn 版本款控制文件
└─ src - 源代码目录文件
index.css
index.html
index.ts
renderer.ts

接下来开始配置 eslint + prettier

eslint 和 prettier

eslint: 查找并修复 JavaScript 代码中的问题。

prettier:prettier 是一个固执己见的代码格式化程序(不知道这个固执己见的怎么理解,反正我是觉得用了它之后代码漂亮了很多,和团队中的同事代码风格一致了,之前都不敢碰同事的代码 😂)

简而言之 eslint 的规则可以避免程序中的代码错误,而 prettier 可以让团队之间代码风格保持一致。二话不说直接上手。

我们使用社区中最严格的 airbnb 风格(后来很多校验规则我都手动去掉了 😂)

npmjs 官网上有两个 airbnb 的解决方案:eslint-config-airbnb 和 eslint-config-airbnb-base。eslint-config-airbnb-base 中没有对 React 的语法校验,当然我们选择 eslint-config-airbnb。

如果你的 npm 版本大于 5 可以直接使用(如果是自己用的开发环境还是建议安装一下最新版本的 node 和 npm,因为 prettier 2 版本中已经不兼容 node10 以下的版本了)

1
npx install-peerdeps --dev eslint-config-airbnb

如果你的 npm 版本小于 5 的话,在 linux/unix 中可以使用

1
2
3
4
(
export PKG=eslint-config-airbnb;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

windows 用户可以安装使用 install-peerdeps 命令行工具

1
2
npm install -g install-peerdeps
install-peerdeps --dev eslint-config-airbnb

详情见eslint-config-airbnb
这里我们执行命令的时候还是要换一下源

1
npx install-peerdeps --dev eslint-config-airbnb -r registry https://mirrors.huaweicloud.com/repository/npm/

安装完成之后需要在项目中.eslintrc.json中配置一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"airbnb",
"airbnb/hooks"
],
"parser": "@typescript-eslint/parser"
}

然后添加 prettier

1
yarn add --dev --exact prettier

如果项目中有 gitignore 和 eslintignore 那么 prettierignore 是基于这些文件的
安装 eslint-plugin-prettier 和 eslint-config-prettier,在.eslintrc.json文件中继续配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"airbnb",
"airbnb/hooks",
"prettier"
],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
},
"parser": "@typescript-eslint/parser"
}

请务必确保在 extends 数组中 prettier 在最后面,prettier 会把其他项配置重写。详见eslint-plugin-prettiereslint-config-prettier
接下来要配置 react,要安装 react 和 react-dom

1
2
yarn add react react-dom
yarn add @types/react @types/react-dom --dev

在 eslint 中 rules 配置中添加 “react/jsx-filename-extension”: “off” 来关闭 jsx 对文件类型的限制
使用 normalize.css 来覆盖浏览器中的默认样式

1
yarn add normalize.css

将 src 目录中的 renderer.ts 改为 renderer.tsx,内容如下

1
2
3
4
5
6
7
8
9
import React from "react";
import reactDom from "react-dom";
import "normalize.css/normalize.css";

const App = () => {
return <div>hello react</div>;
};

reactDom.render(<App />, document.getElementById("root"));

将 src 文件夹下的 index.html 内容改为

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

然后运行 npm start 看到 页面中显示 hello react 就证明基本环境已经搭建完毕!