electron-react-antd-antv-sqlite3-cli

已废弃！！本仓库没有精力再维护，请转到Eraac或Eraatc使用，本仓库作为集成sqlite3的参考将继续保留

一个集成electron、react、antd、antv、sqlite3的开发脚手架，便于快速搭建基于react开发的electron桌面应用，本项目只针对Windows环境

该项目是集成sqlite3数据库的electron-react-antd-antv-cli的衍生项目，在实际开发中遇到了自带打包数据库的问题和sqlite3包不能直接使用的问题，考虑到多平台编译的缘故，把项目抽离开。

环境依赖

• nodejs 未安装可参考
• node-gyp
• windows-build-tools

关于electron的镜像，electron7.x之后需要设置单独的镜像，不然会安装报错；根据官方文档，中国地区镜像为: https://cdn.npm.taobao.org/dist/electron/，我参考过很多的教程仅发现一篇编译成功并且叙述详细，所遇到的问题和解决方式和这篇帖子几乎完全相同 electron+sqlite3的一起使用

在Windows的环境下命令为:

# 关于electron
npm config set ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"

# 验证设置
npm config ls

# 成功配置输出
# ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"


# 关于node-gyp和windows-build-tools
# 全局安装node-gyp
npm install node-gyp -g

# 全局安装windows-build-tools
npm install windows-build-tools -g

# 安装windows-build-tools的时候会自动检查安装python2.x这个依赖，之前安装node-sass的时候我碰到过这个问题，怕麻烦的话提前装个vs2015，其实只是需要一个visual C++ Build Tools而已。。。

上面visual C++ Build Tools可以参考这个同学的文章 Microsoft Visual C++ Build Tools下载/解决Visual C++ 14.0 is required问题，点击这直接下载安装 Visual C++ Build Tools 2015，这个都是Windows环境下的问题，electron-rebuild这个依赖在Windows10下编译sqlite3是报错的

更新记录

请参考GitHub: HerbertHe/electron-react-antd-antv-cli, Gitee: HerbertHe/electron-react-antd-antv-cli

快速使用

• clone 仓库

# github
git clone https://github.com/HerbertHe/electron-react-antd-antv-sqlite3-cli.git

# gitee
git clone https://gitee.com/HerbertHe/electron-react-antd-antv-sqlite3-cli.git

已提供开发工具Edever做更便捷的下载管理，请参考文档使用Gitee: HerbertHe/Edever, GitHub: HerbertHe/Edever

• 进入仓库

• 下载依赖，会花费一些时间请耐心等待

yarn

• 命令行打开进入sqlite3所在的目录 node_modules/sqlite3

cd node_modules/sqlite3

• 编译sqlite3（只针对Windows系统）

根据你的实际需求更改下述的命令，我在node的脚本命令里已经提供了针对于本项目依赖的命令请参考执行，命令解析请参考下面的参考项目

# 32位操作系统
yarn run sqlite3:ia32

# 64位操作系统
yarn run sqlite3:x64

• 验证安装

yarn run ele:dev

关于项目

查看项目从package.json开始，项目的README.md可能更新不及时

1. 已提供的指令

       "react:dev": "启动react的预览",
       "react:build": "构建react的产物",
       "react:test":  "react测试",
       "react:eject": "react-scripts eject",
       "ele:dev": "启动electron开发预览",
       "sqlite3:ia32": "编译sqlite3为32位环境",
       "sqlite3:x64": "编译sqlite3为64位环境"
       # 下面详述包及自定义配置，目前只针对electron的开发做了脚本
   

       # 项目启动后在任何时间都可以在命令行输入rs回车使用nodemon强制项目更新
       rs
       # Ctrl + c后输入y即可退出命令行启动预览环境
   

   具体命令解析:

   node-gyp rebuild --target=7.1.11 --arch=x64 --target_platform=darwin --dist-url=https://atom.io/download/atom-shell --module_name=node_sqlite3 --module_path=../lib/binding/electron-v7.1.11-darwin-x64
   
   # --target为electron的版本
   # --arch为系统架构 ia32/x64
   # --target_platform为Windows平台 win32/darwin
   # --module_name为模块名
   # --module_path为生成模块路径，命令规范为：electron-electron版本-平台-架构
   

2. 项目的默认包管理

   本项目默认使用yarn进行包管理

3. 项目依赖包详解

   • 项目中使用的开发依赖react-app-rewired customize-cra babel-plugin-import less less-loader antd-dayjs-webpack-plugin 全部基于 antd的高级配置，没有使用eject对外暴露webpack来修改配置，使用了react-app-rewired的解决方案。react-app-rewired依赖customize-cra，对于自定义的webpack设置可以参考 api 获取使用所有customize-cra提供的API。配置文件为根目录的config-overrides.js

   • 项目的dev指令详解：package.json中对应指令为nodemon --watch main.js --exec concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none yarn start\"，其中利用nodemon依赖监听main.js文件修改重载指令；concurrently并行wait-on http://localhost:3000 && electron .和cross-env BROWSER=none yarn start指令；wait-on依赖用于监听本地react服务的启动情况，当本地加载完成时执行electron .；cross-env利用了交叉环境设置环境变量BROWSER=none从而避免react自动启动浏览器预览

   • 项目自带了antd和bizCharts，提供了样式库和图形可视化的能力，bizCharts是阿里基于antv g2的React商业化封装，具体文档可参考下面的文档引用

参考文档

• 在create-react-app中使用
• react-app-rewired
• customize-cra
• bizCharts
• Ant Design of React
• electron