七牛云存储客户端（仿百度云网盘支持文件拖拽，仿文件夹操作，支持一键上传）

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

图片

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

图片

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

使用 electron-forge

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

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

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 来创建开发环境。下面是初始化完成后的目录结构。

│ .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 以下的版本了）

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

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

(
  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 命令行工具

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

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

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

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

{
  "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

yarn add --dev --exact prettier

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

{
  "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-prettier、eslint-config-prettier。
接下来要配置 react，要安装 react 和 react-dom

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

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

yarn add normalize.css

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

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 内容改为

<!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 就证明基本环境已经搭建完毕！