NAPI-Generator VSCode插件开发踩坑记录

NAPI-Generator VSCode插件开发踩坑记录

背景

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

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

问题

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

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

问题分析

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

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

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

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

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

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

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

"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 中。

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