源码启动-前端部分代码开发

Davinci 是一个 DVaaS（Data Visualization as a Service）平台解决方案，面向业务人员/数据工程师/数据分析师/数据科学家，致力于提供一站式数据可视化解决方案。

Davinci源码地址：
https://github.com/edp963/davinci

Davinci源码大概分为三部分：

采用React的前端工程
采用Spring Boot的后端工程
采用Jekyll + Minmal Mistakes的文档工程，用来介绍Davinci的用户操作方法
本篇文章将介绍如何从整个工程中将前端部分代码抽离出来单独开发

笔者环境

系统：mac pro 
Davinci：davinci-0.3.0-beta.8
node版本：v12.13.1
npm版本：6.12.1

目录

前端部分代码在Davinci源码根目录的 webapp/ 目录中

目录结构

├── app              # 主应用源码
  ├── assets           # 资源文件
  ├── components       # 通用组件
  ├── containers       # 路由容器组件
  ├── utils            # 通用实用方法
  └── app.tsx          # 主应用入口
├── internals        # 开发工程文件
├── libs             # 改动后的项目依赖
├── server           # 开发服务器
├── share            # 分享页源码
└── package.json

开发环境

建议：

node： “>=8.10.0”
npm： “>=5”
安装依赖

npm install

开发

根目录运行命令：

npm start

前后端联调：
为了方便前后端联调不跨域，开发环境下有请求代理，配置真实后台接口地址文件为：
server/middlewares/addDevMiddlewares.js

Lint

npm run lint

Test

npm run test

打包

npm run build

常见问题

• npm install执行过程中报错：npm ERR! Unexpected end of JSON input while parsing near ‘xxx’

  ---

  解决办法：

       删除掉已经自动生成的node_module文件夹，然后再运行如下命令

npm cache clean --force
npm install 

• npm install执行过程中报错：Error: Command failed: C:\WINDOWS\system32\cmd.exe /s /c，或者报错：Error: pngquant failed to build, make sure that libpng-dev is installed

  ---

  解决办法：

       换个网络环境重新执行npm install，确保网络能够访问到npm源和git源

• npm start执行完后，可以正常访问登陆页面，但是控制台提示很多类似TS232的错误

---

      解决办法：

    这个可能是源码中的TypeScript语法不规范引起的，笔者将在后面尝试修复这些错误，这些错误      不影响正常开发，可以忽略

• 前端起不来

  ---

  解决办法

  删除 package-lock.json;
  去掉 package.json 中的 image-webpack-loader，使用 npm 安装依赖
  最后使用 cnpm install image-webpack-loader

• 类型不对

ERROR in ./app/assets/images/grid.png
Module build failed (from ./node_modules/_image-webpack-loader@7.0.1@image-webpack-loader/index.js):
ArgumentError: Expected `options.quality` to be of type `array` but received type `string`
    at u (F:\work\workspace\davinci\webapp\node_modules\_ow@0.17.0@ow\dist\source\index.js:1:12174)
    at F:\work\workspace\davinci\webapp\node_modules\_imagemin-pngquant@9.0.2@imagemin-pngquant\index.js:35:3

解决办法

1、在vue项目查找webpack.config.js文件（文件名称可能不同）；

2、将字符串类型的内容，修改为数组形式，如下所示：

instead

pngquant: {quality: '65-90', speed: 4},

do this

pngquant: {quality: [0.65, 0.90], speed: 4},