OpenHarmony开发者论坛

标题: NAPI-Generator VSCode插件开发踩坑记录 [打印本页]

作者: 深开鸿李雨溪 时间: 2024-10-22 20:09
标题: NAPI-Generator VSCode插件开发踩坑记录
[md]# NAPI-Generator VSCode插件开发踩坑记录

## 背景

napi-generator初始目标为提供基于OpenHarmony标准系统,推出一些提升开发效率的NAPI框架代码生成工具。工作范围：

1. 针对开发人员、主流操作系统的IDE平台，提供NAPI框架代码生成工具
2. 提供使用范例
3. 提供持续的改进优化

## 问题

在 napi-generator 的 vscode 插件工具的开发过程中，出现了“在开发环境中功能正常运行，但插件打包为vsix加载运行失败”的现象。

通过 `.vsix` 插件包在vscode中安装插件后，在插件市场tab内显示安装成功，插件所对应的右键菜单也能正常显示，但菜单使用等功能不能正确执行。

## 问题分析

### 1. 首先定位问题出现的原因，考察插件是否正确加载

在vscode插件生命周期的 `activate` 函数中打印日志

```ts
export function activate(context: vscode.ExtensionContext) {
console.log('Congratulations, your extension "helloworld-sample" is now active!');
```

经过排查，发现日志能够完整打印，说明插件可以成功加载。

### 2. 查看 VSCode 插件日志，考察是否存在其他运行时错误

在vscode的界面中，点击 “帮助 -> 切换开发人员工具”，可以调出类似浏览器F12的日志页面。

经排查发现在软件调用时，显示引入 `typescript` 第三方库失败。但在 `package.json` 中已经导入过 `typescript`。

```json
"devDependencies": {
"@types/node": "^16.17.0",
"@types/vscode": "^1.34.0",
"@typescript-eslint/eslint-plugin": "^5.30.0",
"@typescript-eslint/parser": "^5.30.0",
"eslint": "^8.13.0",
"typescript": "^4.7.2",
"vsce": "^2.15.0"
}
```

## 解决方案

在package.json文件中，dependencies 和 devDependencies 都是用来定义项目依赖的，但它们之间有些区别：

### dependencies 运行时依赖：

这些是项目运行所必需的依赖。当你发布你的应用程序或库时，这些依赖会被包含在内。任何运行你的代码的用户或系统都需要安装这些依赖。
如果一个包在生产环境中被使用，它应该被列为dependencies。

### devDependencies 开发时依赖：

这些是只在开发过程中需要的依赖，比如构建工具、测试框架等。它们不包括在生产环境的构建中，因此不会增加生产环境的负载。当你安装一个包用于开发目的，但不在生产环境中使用时，它应该被列为devDependencies。
例如，如果你使用webpack来构建你的应用程序，webpack应该被列为devDependencies。
安装依赖时，dependencies中的包会被默认安装，而devDependencies中的包则需要使用 `--save-dev` 标志或者在 `npm install <package>` 命令中明确指定。

使用npm安装依赖的命令如下：

安装运行时依赖：`npm install <package_name>` 或 `npm install <package_name> --save`
安装开发时依赖：`npm install <package_name> --save-dev`

在通常的开发流程中，我们一般只将 `typescript` 作为开发工具使用，通常不将其引入到生产环境构建；而在本次开发的案例中比较特殊，我们不仅使用了 `typescript` 库作为开发工具，同时也在运行中使用了该库的语法分析能力，因此该库应当被打包进入生产环境的构建当中，也就是应当写入 `dependencies` 中。

经过修改并重新打包后，开发人员页面内不再显示错误信息，通过打包安装的插件功能能够正确运行。

```

```

[/md]

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)