组件库设计

您所在的位置：网站首页 › 宝马x1目前优惠政策是什么 › 组件库设计

组件库设计

2023-05-30 07:42| 来源: 网络整理| 查看: 265

您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~

写在前面

React组件库Concis在大量募集小伙伴一起参与开源项目开发，目前仍有很多计划需要去实施，包含PC端组件扩充、移动端组件开发、Concis生态插件开发等等，具体可以看此文：

React组件库Concis,寻求社区有兴趣的小伙伴加入...

Concis组件库相关链接，希望大家多多鼓励支持、多多Star，给作者更多的动力

Github 线上文档

需求来源

博主在开发组件库以及实际项目测试过程中，突然发现Concis的组件都需要去手写，而回想以前使用antd/el组件库时都是可以自动生成代码块的，并且移到标签中可以看到对应的一些提示信息，于是博主开始探索Vscode插件的开发了。

生成项目

首先全局安装vscode脚手架

npm install -g yo generator-code

安装完成后在命令行输入

yo code

在提示中直接选择New Extension，生成一个vscode插件工程，下面几项是vscode所提供单独功能开发的脚手架，可以理解成小插件，由于这里是具体化到整个Concis工程，因此选择第一个。

在这里插入图片描述

接下来输入一些插件的命名即可生成项目，经过处理后的项目目录是这样的：

在这里插入图片描述这里后续会讲到自定义打包的一些配置。

代码补全(snippets)

代码补全功能相对简单，只需在项目中创建snippets.json文件，在里面配置snippets就可以。有一个网站可以帮助我们快速的创建 code snippet snippet-generator.app/

在这里插入图片描述

把对应的snippet生成，复制到snippets.json中即可，就像这样：

在这里插入图片描述

同时在package.json中配置contributes，指定插件所生效的文件，博主是React组件库，因此定了js/ts/jsx/tsx四种文件类型

在这里插入图片描述

很简单，不需要你动脑筋写一行代码，自动补全的功能实现了。

智能提示

提示的话就需要我们入门一下，写一写vscode的api啦，打开项目生成的extension.ts文件，将代码写成这样：

import * as vscode from 'vscode' const compileFiles = ['react', 'typescript', 'javascript', 'javascriptreact', 'typescriptreact']; function providerHover(document: vscode.TextDocument, position: vscode.Position) {} export function activate(context: vscode.ExtensionContext) { context.subscriptions.push( vscode.languages.registerHoverProvider(compileFiles, { provideHover, }), ); } export function deactivate() {}

上面代码我们通过vscode.languages.registerHoverProvider注册了鼠标移入事件，并通过compileFiles指定了文件类型，而插件所要实现的业务功能就在provideHover中实现。

接下来我们解读一下这里面的功能：

首先，通过document.lineAt获取代码行，判断Concis组件关键词是否出现在代码内容line.text中；对满足条件的情况，获取组件线上文档地址，编辑提示的内容信息，对应代码段中的text；将text通过new vscode.Hover返回；

至此，代码自动补全+智能提示功能完成了，来看一下效果吧：

请添加图片描述

打包发布 1.第一步，全局安装vscode打包工具 npm i -g vsce 2.第二步，创建vscode账号

首先访问 login.live.com/ 登录你的Microsoft账号，没有的先注册一个，然后访问： aka.ms/SignupAzure…，如果你从来没有使用过Azure，那么就要先创建一个Azure DevOps 组织，默认会创建一个以邮箱前缀为名的组织。

在这里插入图片描述

3.第三步，创建组织令牌

在这里插入图片描述点击右上角的用户设置，点击创建新的个人访问令牌。

在这里插入图片描述

这里请选择All accessible organizations 否则会无法部署插件。

创建完毕会出现一个token，请手动记录下来这个token，因为官方不会为你保存，并且这个token在发布时会用到。

4.第四步，创建publisher

前往插件市场marketplace.visualstudio.com/创建一个publisher，并在package.json中添加 publisher字段，名字保持一致。

配置

好了，到这里你已经完成了准备工作。

博主通过rollup将代码打包后再使用vscode内置的打包发布，因此打包流程如下：

rollup打包 vsce打包 vsce发布

rollup.config.js配置如下：

import typescript from 'rollup-plugin-typescript2'; import clear from 'rollup-plugin-clear'; import resolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; import { terser } from 'rollup-plugin-terser'; import { uglify } from 'rollup-plugin-uglify'; export default { input: ['./src/extension.ts'], output: [ { file: 'dist/extension.js', format: 'cjs', name: 'cjs.js', }, ], plugins: [ typescript(), // 会自动读取文件tsconfig.json配置 clear({ targets: ['dist'], }), resolve(), commonjs(), terser(), uglify(), ], external: ['react', 'react-dom'], };

在package.json中配置一下命令行，让我们的打包发布过程像如下所说的顺序：

"scripts": { "upgrade": "node ../../scripts/replace-version-in-vscode.ts", //升级package.json中版本 "compile": "rollup -c ./rollup.config.js", //rollup打包 "build": "vsce package", //vsce打包 "generate:readme": "node ../../scripts/vscode/generate-vscode-snippet.ts", //生成README.md内容 "publish": "npm run compile && npm run build && vsce publish" //部署 },

这里upgrade和generate:readme是博主针对于Concis组件库自己加的两个脚本，我们看一下publish，可以看到按上述所讲的顺序进行打包构建，这样代码层面的配置已经做完了。

执行npm run publish，输入之前创建保存的token，这样就发布成功了。

请添加图片描述

看到这里，你已经掌握了开发一个vscode工程并打包发布的内容了，博主针对组件库的需求进行的扩展，也就是上面所提到的两个命令：

npm run upgrade //升级package.json中版本 npm run generate:readme //根据组件项目目录，自动生成README.md

从Concis-snippets插件的介绍可以看到，下面有一段表格，表格介绍了每个snippet对应的介绍，看到这你应该想象到了吧？此时博主又开发了两个组件，但是不想手动去更新README.md，这时就需要自定义脚本了。

自动更新README.md //根据项目目录写入vscode-snippets README.md const fs = require('fs-extra'); const path = require('path'); const baseTemplate = fs.readFileSync(path.join(__dirname, 'base-template.md'), 'utf-8'); const componentList = fs.readdirSync(path.join(__dirname, '../../packages/concis-react/src')); let tableTemplate = ''; componentList.forEach((f) => { if (f[0].charCodeAt(0) >= 65 && f[0].charCodeAt(0) { console.log('生成concis-vscode-snippets 成功'); // eslint-disable-line });

这里我们有一个基础模板，放着README.md上部分一直不会变的内容，对应代码中base-template.md，然后读取了组件目录，将基础模板和表格内容拼接起来，就可以了。

自动升级package.json版本 //更新concis-vscode-snippets/package.json中的版本 const fs = require('fs-extra'); const path = require('path'); const { version } = require('../packages/concis-vscode-snippets/package.json'); const fileText = fs.readFileSync( path.join(__dirname, '../packages/concis-vscode-snippets/package.json'), 'utf-8', ); const replacedVersion = fileText.split('\n').map((t) => { if (/"version":/.test(t)) { let newVersion = version.split('.'); let [first, secord, third] = newVersion; if (third >= 10 || secord >= 10) { if (third >= 10) { third = 0; secord = Number(secord) + 1; } if (secord >= 10) { third = 0; secord = 0; first = Number(first) + 1; } } else { third = Number(third) + 1; } newVersion[newVersion.length - 1] = Number(newVersion[newVersion.length - 1]) + 1; console.log(`"version": "${first}.${secord}.${third}"`); return ` "version": "${first}.${secord}.${third}",`; } return t; }); fs.outputFile( path.resolve(__dirname, '../packages/concis-vscode-snippets/package.json'), replacedVersion.join('\n'), ).then(() => { console.log('替换 package.json 中的 version 成功！'); // eslint-disable-line });

代码实现了一个替换package.json文件中版本的功能，有了这两个自动脚本的支持，我们就可以把publish改成这样：

"scripts": { "upgrade": "node ../../scripts/replace-version-in-vscode.ts", "compile": "rollup -c ./rollup.config.js", "build": "vsce package", "generate:readme": "node ../../scripts/vscode/generate-vscode-snippet.ts", "publish": "npm run upgrade && npm run generate:readme && npm run compile && npm run build && vsce publish" } 总结

本文通过博主对于Concis实际案例，讲解了开发一个vscode插件从准备工作到功能实现最后打包发布的全过程，如果文章有用，希望多多支持。

Concis组件库地址

请添加图片描述

Concis组件库线上链接：react-view-ui.com:92 github：github.com/fengxinhhh/… npm：www.npmjs.com/package/con…

开源不易，欢迎学习和体验，喜欢请多多支持，有问题请留言，如果此文对你有帮助，博主需要你的支持，感谢。

【本文地址】

组件库设计

组件库设计

今日新闻

推荐新闻