dva-boilerplate-electron 构建过程记录

何为dva-boilerplate-electron

dva-boilerplate-electron 是一个 基于dva（react 轻量级脚手架）+electron 结合的快速构建桌面程序的应用框架

相关地址：
github： dva-boilerplate-electron
架构说明： Electron 应用实战 (架构篇)

安装及运行

1. 下载模板

创建并进入目录you-pro， 执行下面的命令（win的cmd中，不带$符号）；

$ curl -fsSL https://github.com/sorrycc/dva-boilerplate-electron/archive/master.tar.gz|tar -xz --strip-components 2

2、安装依赖

注意：框架需要安装两层依赖，一个是在you-pro下的 开发环境依赖，一个是you-pro/app的 运行环境依赖，如果没有安装 运行环境依赖，运行时会报错。

假设已经在you-pro目录下了 ，运行 npm install 安装 开发环境依赖

进入 you-pro/app目录 运行 npm install 安装 运行环境依赖

由于网络环境问题，建议使用 yarn或cnpm 来安装依赖，这样会少很多问题

3、运行

经过上面的安装过程，如果没有出现什么问题的话，基本上可以成功运行，如果有问题，也大多是由于网络原因导致依赖包没有安装完整所造成的。

运行npm run dev 热启动， 修改代码会自动刷新页面

运行npm start 启动 electron 显示界面

4、打包

运行打包命令前 修改一下啊下you-pro目录下的 package.json 文件：

"scripts": {
"rebuild": "electron-rebuild -m ./app/node_modules", 
}

将上面的代码中 "rebuild" 这一行 改成如下代码：

"rebuild":"electron-rebuild -d=https://gh-contractor-zcbenz.cnpmjs.org/atom-shell/dist/ -m ./app",

改完之后运行npm run pack 就可以生成exe 文件，并生成一个安装包，至于为什么要这样改，可以看一下 Electron 应用实战 (架构篇) 中关于打包的那一段。

问题点

1、asar文件

将项目打包成可执行文件之后，在you-pro/dist/win-unpacked/resources 目录下 有一个app 文件夹，存放着我们程序运行所用到的一些关键文件及资源文件，这些文件我们是不希望被用户看到的，我们需要app目录打包成erectron中的asar文件，这时候我没只需要修改一下you-pro目录下的 package.json 文件，找到build -> asar 这一项，将原本的false 改成true 让后重新运行打包命令即可。

2、img路径问题

项目打包成应用之后，打开应用，发现页面中带有img的组件或css中引用的img都不能正常显示， 原因是开发环境下的路径跟生成环境下的路径不一致所导致，如果要生产环境下正常显示图片，需要修改一下you-pro目录下的.roadhogrc文件：

{
  "entry": "./src/renderer/index.js",
  "outputPath": "./app/dist", 
  "publicPath": "", // 加入这一个属性，值可以根据你的需要再定义
  "define": {
    "$dirname": "__dirname"
  },
  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr",
        "transform-runtime"
      ]
    },
    "production": {
      "extraBabelPlugins": [
        "transform-runtime"
      ]
    }
  }
}

如果更改了上面的文件，还是没有显示图片，请更新下roadhog包，更新到最新版本，再重新打包

至于为什么这样做，可以去了解一下roadhog的 配置

---

更多的问题点会在使用的过程中不断更新..