Webviz - ROS可视化开源项目 - 本地构建教程

1. 安装 nvm

nvm 是nodejs的版本管理器，类似 Anaconda（python的版本管理器）

#预备工作
sudo apt-get update
sudo apt-get install build-essential libssl-dev

#获取脚本并安装
#方法一
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
#方法二
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

#更换源为淘宝镜像
#方法一（临时）
NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
#方法二（永久）
#在 ~/.bashrc 中添加下列语句
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node

2. 安装nodejs

直接使用nvm进行node安装和版本控制

Webviz项目暂时仅支持 node10 和 node11，高版本的 node 会出现编译错误。

#查看可安装的node版本
nvm ls-remote
#安装指定版本的node
nvm install 10.19.0
#查看当前的node版本
nvm current
#查看已安装的node版本
nvm list
#选择需要的node版本
nvm use 10.19.0

3. 换源加速

在国内使用node的npm工具来安装依赖包常常失败，多是网络的问题

#更换npm源为淘宝的源
npm config set registry https://registry.npm.taobao.org
#检查是否配置成功
npm config get registry

#运行下面的命令可以恢复成官方的源
npm config set registry https://registry.npmjs.org

如果在本地构建时出现下载chromium过慢，可以尝试以下操作

npm config set puppeteer_download_host=https://npm.taobao.org/mirrors

4. 本地构建

更多本地构建的操作请看项目README

1. 克隆项目到本地

   git clone https://github.com/cruise-automation/webviz.git
   cd webviz/
   

2. 安装依赖

   #建议先手动安装node-sass
   npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
   npm install node-sass
   #执行脚本安装项目依赖
   npm run bootstrap
   

   

3. 编译项目

   npm run build
   

   
   

4. 运行项目

   npm run docs
   

   
   
   

5. 运行视频