ITS项目--结构梳理

《1》当前ITS项目结构

存在问题

• 目录结构略显混乱
  开发目录存在于~\ITS-shuangshi\resources\app\page_v15，开发目录位于多层子目录下，不符合开发理念。
• 打包方式不够明确
  项目是如何打包为客户端，是通过命令行启动electron ./main.js electron build命令等并不清晰
• 代码管理目前是svn，接下来应会改为git

《2》ITS项目打包发布

its.png

接下来，项目目录可能会变更为如上图所示结构：

• app目录下存放its页面部分
  css ---- 存放项目需要的css文件
  js ---- 存放项目需要的js文件
  img ---- 存放项目需要的图片资源
  index.html ---- electron生成客户端时的入口html
  main.js ---- 存放electron生成客户端的入口文件
  package.json ---- 包管理文件

之前项目目录下的login.html与courseware.html再之后的开发中可能会转为vue的一个模块，为login.vue和courseware.vue文件。

• 客户端开发与生成
  在package.json文件中scripts内置命令可完成electron生成客户端

electron ./main.js 直接运行electron生成客户端进行开发调试。
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>来打包客户端
location of project是你项目文件夹的位置
name of project定义你的项目名
platform决定要构建的平台（all 包括Windows，Mac和Linux ）
architecture决定构建哪个构架下（x86或x64，all表示两者）
electron version让你选择要用的Electron版本
electron-builder 来给已经打包好的文件生成安装包

• 前端工程化（webpack 与 gulp）

当前its未做代码，资源压缩，新版本应要加上该部分。

• webpack 模块化管理
  当工程整体切换成模块化时，webpack可以帮助我们进行模块管理与模块热替换，可实现模块按需加载，模块预处理，模块打包。
  --如何提取公共模块与依赖
  昨天webpack打包时碰到node内置模块无法加载的问题，由于当前未提供浏览器环境，若选用webpack时，该问题需再研究下。
• gulp 压缩
  gulp可进行对html，css，js的压缩，但我不清楚它在模块化组件处理上的功能。