node和js知识点

最后更新于2022年5月5日 10:22:56

How to write Promises in JavaScript
How to use Async Await in JavaScript
ubuntu系统下载指定版本nodejs：

curl -fsSL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

前端

What is DOM element?

怎么在一个版本过新（React 18.1.0）的Create-React-App项目中运行Worldview的Demo？

警告：仅限个人使用！！！！！！存在大量依赖问题！
容我先喝口水；
目的是为了使用Webviz，但是Worldview是Webviz的一个依赖库，它都跑不通，别的就更别想了。
Worldview的demo在这里

1、安装Worldview库

React不降级到16.x没法装worldview库：

npm install react@16.x react-dom@16.x --save

安装命令：

npm install --save regl-worldview

React降级之后记得src/index.js也要修改（也可以一步到位直接改成demo的样子）：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(<React.StrictMode>
    <App />
</React.StrictMode>, document.getElementById('root'))

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

2、webpack有问题

Module not found: Error: Can’t resolve ‘fs’ in ‘/home/user/WebstormProjects/worldview-test/node_modules/draco3d’

react编译降级

npm install react-scripts@4.x --save

这个好像不用管
magic header not detected
到这一步，draco3d又会出来作妖，参考下面的链接：
draco3d报错：[magic header not detected](https://github.com/matter-labs/zksync/issues/238)

3、Eject

到这一步就有图了，但是这个图它不能动：
Module not found: Can’t resolve ‘a’ in ‘/home/user/WebstormProjects/worldview-test/node_modules/draco3d’

首先Eject：
具体如何Eject的步骤参考这个：react-create-app新版配置webpack.config.js

然后修改配置：
这一步是因为Worldview的draco3d这个库跟我现在的环境的兼容有tm大问题，参考：
documenting usage of worldview with webpack

4、缺失module

Error: Cannot find module ‘optimize-css-assets-webpack-plugin’

npm i optimize-css-assets-webpack-plugin --legacy-peer-deps

Webviz的使用

Webviz可以直接通过rosbridge连接到rostopic，参考：Update packages/webviz-core from internal repo

Orbit Control

Orbit Controls

项目总结——基于WebGL的点云全景可视化
RayCaster介绍，重点看Example

React的Antd Card组件上添加点击事件

Antd Card组件上添加点击事件

react中使用antd的modal模块，想要在modal中拿到一个dom元素该怎么拿

react中使用antd的modal模块，想要在modal中拿到一个dom元素该怎么拿
这个下面的回答雀食牛逼，我服了。

stringify和parse

JSON.stringify()是把一个object转换为string，JSON.parse()相反，这俩我就没分清过。

关于react组件报错“A component is changing an uncontrolled input of type text to be controlled”

关于react组件报错“A component is changing an uncontrolled input of type text to be controlled”

可选链接运算符

加强版的.运算符：提升代码健壮性的利器：可选链运算符

后端

rosnodejs的API： ROS.org: rosnodejs/overview
WebSocket with NodeJS – Quick Getting Started Guide