## 前言
最近因为某些原因，最近决定升级VUE前端以及Electron APP工程中版本，其中Node.js版本从9.9.0升级到12.19.1。因为涉及较多东西，所以写此笔记。

推荐：
- 使用nvm，为了保证不会耽误旧版本项目，可以使用nvm对node.js版本进行管理。你只需要使用nvm use 版本号，即可切换对应版本。
- 使用版本管理，使得每一步升级都可以回滚。

## vue前端
### vue
项目用的是vue-cli生成。vue版本号需要与vue-template-compiler版本号一致。本人值从高版本一个一个往下试错，最后用了个可以跑通的版本。（因为用的是npm）

### node-sass
如果直接使用npm install -s node-sass可能会引发node-gyp编译而造成的错误。推荐先npm uninstall node-sass将node-sass卸载干净，之后再安装。这个时候就会直接下载编译好的node-sass，而不是尝试编译。

**node-sass与node.js版本也有关系**，需要注意：

NodeJS | Supported node-sass version | Node Module
---|---|---
Node 15 | 5.0+ | 88
Node 14 | 4.14+ | 83
Node 13 |	4.13+, <5.0	|79
Node 12	|4.12+ |	72
Node 11	|4.10+, <5.0 |	67
Node 10	|4.9+ |	64
Node 8	|4.5.3+, <5.0 |	57
Node <8	|<5.0 |	<57

### Element-ui
当低于**2.7.0**版本的Element-ui升级时需要注意要添加对**jsx**语法的支持，否则会报一下错误：

```
error  in ./~/.2.11.1@element-ui/packages/form/src/label-wrap.vue
Syntax Error: Unexpected token (23:14)
  21 |         }
  22 |       }
> 23 |       return (<div class="el-form-item__label-wrap" style={style}>
     |               ^
  24 |         { slots }
  25 |       </div>);
  26 |     } else {
 @ ./~/.2.11.1@element-ui/packages/form/src/label-wrap.vue 4:2-108
```
解决：
```npm
npm install  babel-plugin-syntax-jsx  babel-plugin-transform-vue-jsx  babel-helper-vue-jsx-merge-props  babel-preset-env  --save-dev
```
在项目目录的.babelrc中添加对jsx插件的配置
```json
{
  "plugins": ["transform-vue-jsx", ...]
}
```

## Electron
对于Electron-vue项目，还是推荐创建一个Electron-vue新项目。之后再将代码移植过去比较好。

### require/process/module is not define
因为新版本Electron中默认没有集成node。
解决：修改src/main/index.js,在webPreferences中加入nodeIntegration: true。
```
mainWindow = new BrowserWindow({
  height: 563,
  useContentSize: true,
  width: 1000,
  webPreferences: {
    nodeIntegration: true, 
  }
})
```

### can't read property 'app' of
是因为electron10后remote模块默认是关闭的,解决：修改src/main/index.js,在webPreferences中加入enableRemoteModule: true。

### Element-ui的el-table不显示
解决：在.electron-vue/webpack.renderer.config.js中的
```
let whiteListedModules = ['vue']
```
加入elementui：
```
let whiteListedModules = ['vue', 'element-ui']
```
## Node.js后端sqlite3模块
这里会需要使用node-gyp进行编译。这个需要安装visual studio2017，因为最高版本就支持到2017，不支持2019着实蛋疼。即使你给2019安装了2017 版本的构建套件、win10sdk与c++ ATL库，node-gyp都检测到了依然还会说版本不匹配（即使指定了版本为2019）。

如果你安装完2017还是不能正常编译，就可以手动指定vs版本了。执行
```
npm config set msvs_version 2017
```
node-gyp的具体安装步骤可以参考：https://github.com/nodejs/node-gyp#on-windows

## 清除注释
### js 双斜杠
```
//(?!.*\..*\.).*\n
```
### js 多行
```
/\*(.|\r\n|\n)*?\*/
```

### HTML
```
<!--(.|[\r\n])*?-->
```