大家好，我是速冻鱼🐟，一条水系前端💦，喜欢花里胡哨💐，持续沙雕🌲欢迎小伙伴们加我微信：sudongyuer拉你进群，一起讨论，期待与大家共同成长🥂
阅读本文📖
1.您将了解到 0-1 最简单的 JS 基础库如何快速搭建
2.您将了解到如何快速搭建一个 node 服务
3.您将了解到如何写一个 vite 插件并排坑
本文仓库地址：info-js
前言🌵
造这个库源于突然有天同事在写前端 web 应用的时候提了一个需求，需要获取客户端的一些相关信息，于是便开始这个库的编写
需求💻
获取客户端浏览器相关信息
获取客户端相关信息
获取 WebApp 相关信息
获取用户所在 ip 及相关信息
......
开发思路⭐
1.首先是初始化项目啦
npm init 初始化我们的基础库就叫 InfoJs 吧
2.完成获取客户端浏览器相关信息需求
由于是获取浏览器相关信息，肯定我们的 WebAPI 都提供了相应的接口,我们只需要把 window 对象的属性封装到我们的信息对象上，图中省略了部分代码，文章末尾源码地址
class BrowserInfo {
//客户端浏览器Window对象 private _window: Window //客户端浏览器对象 private _navigator: Navigator //客户端浏览器的平台和版本信息 private _appVersion: string = 'unknown' //客户机浏览器发送给服务器的user-agent头部的值 private _userAgent: string = 'unknown' //客户端运行浏览器的操作系统平台 private _platform: string = 'unknown' //客户端浏览器的分辨率 private _screenResolution: string = 'unknown' //客户端是否为移动设备 private _isMobileDevice: boolean = false //客户端信息对象 private _client: ClientInfo | null = null
//当前app包名 private _appPackageName:string='unknown' //当前项目的app版本号 private _appVersionCode:string='unknown' //当前app运行的环境变量 private _viteMode:string='unknown' //客户端ip private _appIpAddress:string='unknown' //客户端ip所在国家 private _appIpCountry:string='unknown' //WebApp mode private _appMode:string='unknown'
//...
export {BrowserInfo}
复制代码
3.window 对象的信息还好获取,那用户 ip 如何获取呢
首先我们得知道 ip 地址是网络中标识主机的地址，那么我们如何获取它呢，那只能通过网络。那我们就可以在基础库中发送一个请求到后端，后端请求头中就有了携带 ip 地址的请求头，获取到 ip 地址后我们再将它返回就好啦。
前端编写🎃:
//获取ip和country信息 fetch('http://infojs.xyz/api/getipaddress') .then(response => response.json()) .then(data =>{ this._appIpAddress=data.ipAddress; this._appIpCountry=data.ipCountry; }) .catch(e=>console.log('获取客户端ip和ip所在地理位置失败～'))
复制代码
后端编写🐚(node):
这里使用的是 express，小伙伴注意一下跨域访问哦
//导入express模块const express = require('express');//导入跨域访问模块const cors = require('cors');// 创建 express 的服务器实例const app = express();
复制代码
这里我的后端服务是通过Cloudflare(全球最快CDN)指过来的，所以请求头中携带有"cf-connecting-ip"和"cf-ipcountry"两个请求头，如果没有用 CDN 可以通过一下请求头获取并返回给客户端:
若 HTTP Header 包含 Client-IP，就先以它当作真实 IP。若 HTTP Header 包含 X-Forwarded-For，则取它当作真实 IP。若两者都没有，则取 REMOTE_ADDR 作为真实 IP。
//获取客户端的ip地址module.exports.getClientIpAddress=(req,res) => { console.log(req.headers) let ipAddress= req.headers["cf-connecting-ip"]??'unKnow' let ipCountry= req.headers["cf-ipcountry"]??'unKnow' res.json({ "ipAddress":ipAddress, "ipCountry":ipCountry })}
复制代码
4.如何获取 WebApp 相关信息呢
webApp 相关信息很多我们都可以在项目 package.json 文件获取，但这些信息我们只能在编译阶段拿到比如环境变量参数等等，如何解决呢?通过开发服务器插件可以解决，这里我们用的 vite，于是就写一个 vite 插件吧
编写插件:
const path = require("path")const cwd = process.cwd();let pkgManifest = require(path.join(cwd, 'package.json'));module.exports = function () { let appVersion = pkgManifest.version let appPackageName = pkgManifest.name let viteMode = undefined const virtualFileId = '@infoJs-plugin-virtual-module' return { name: 'infoJs-plugin', // 必须的，将会在 warning 和 error 中显示 config: (UserConfig, {mode}) => { viteMode = mode; }, resolveId(id) { if (id === virtualFileId) { return virtualFileId } }, load(id) { if (id === virtualFileId) { return ` export const appInfo = { "appVersion":"${appVersion}", "appPackageName":"${appPackageName}", "viteMode":"${viteMode}", } ` } } }
}
复制代码
通过这个插件获取 package.json 文件对象，然后通过虚拟目录导出我们的对象
const virtualFileId = '@infoJs-plugin-virtual-module'
复制代码
这里有个问题我们如何将我们插件导出的虚拟目录注入到另外一个库文件中呢？
这里直接在库文件中引入这个虚拟路径，由于他不存在所以 ts 会报错，这里我们//@ts-ignore忽略掉
//@ts-ignoreimport {appInfo} from '@infoJs-plugin-virtual-module'
复制代码
关引入了还是会有问题，编译的时候也会报解析这个路径出错的问题
通过查阅资料如果在库中引入了虚拟路径我们应该这个路径排除在打包的范围之外，这样 vite 就会忽略它了
vite.config.js
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import infoJsPlugin from '@imf/infojs-plugin'// https://vitejs.dev/config/export default defineConfig({ plugins: [vue(),infoJsPlugin()], //优化包依赖 optimizeDeps:{ exclude:['@infoJs-plugin-virtual-module'] }})
复制代码
这样我们就完成了所有需求啦，看到这里可能有的小伙伴有点懵逼，我已经将所有代码上传 github 了，感兴趣的小伙伴可以去查看一下源码^_^
仓库地址：info-js
结束语🌛
那么我的第一篇文章就结束了，文章的目的其实很简单就是对日常工作的总结和输出，不管菜不菜输出总是有意义的，也希望通过文章认识更多志同道合的朋友，如果你也喜欢折腾，欢迎加我好友，一起沙雕，一起进步。
github🤖:sudongyu
个人博客👨💻:速冻鱼blog
vx👦:sudongyuer
写在最后
伙伴们，如果喜欢我的口水话给🐟🐟点一个赞👍或者关注➕都是对我最大的支持。
加我微信：sudongyuer，邀你进群，一起学习前端，成为更优秀的工程师～（群二维码在这里->前端要早睡, 二维码过期了的话看链接沸点中的评论，我会把最新的二维码放在评论区，当然也可以加我微信我拉你进群，毕竟我也是有趣的前端，认识我也不赖🌟～ps：公司最近在招聘前端，欢迎小伙伴咨询，坐标成都，我的 vx：sudongyuer，或者直接投递邮箱[hr@haiyao.io]
评论