zhangyu-xa.github.io

利用 Verdaccio 搭建 Npm 包管理私服

之前开发项目的过程中，多多少少都会沉淀积累一些组件，后来队伍越来越大，项目越来越多，通过拷贝粘贴的方式干重复的事情总感觉太low，想着能不能通过高雅的方式来解决这些重复工作，于是就想到了自己来搭建一个npm私服试试，这里我选的是Verdaccio。什么是 Verdaccio “一个基于 Node.js 的轻量级私有仓库”。平时使用 npm publish 进行发布时，上传的仓库默认地址是 npm，通过 Verdaccio 工具在本地新建一个仓库地址，再把本地的默认上传仓库地址切换到本地仓库地址即可。当 npm install 时没有找到本地的仓库，则 Verdaccio 默认配置中会从 npm 中央仓库下载。运行环境的nodejs和npm版本如下： C:> node -v v16.20.2 C:> npm -v 8.19.4 一、安装和配置话不多说，接下来我们就直接安装 verdaccio： npm install -g...

15 Jan 2024

H5 页面如何正确的接入微信开放 JSSDK（WX-JSSDK）

最近开发了一个 H5 项目，需要开发一个二维码扫码功能，有以下几种方案：已有的二维码扫码组件：html5-qrcode 、vue-qrcode-reader 等等；利用微信开发JSSDK实现；经过调研，方案一虽然可以实现，但是识别效率不高，受限于扫码环境（如光线、角度等等，识别错误率较高）；方案二比较高效，且微信开发sdk比较稳定，扫码识别率很高，但是需要强关联微信浏览器。经过讨论，最终确认用第二种方案开发，这里需要特别说明一下，一旦引入微信开放JSSDK，你的H5网页只能通过微信浏览器打开才能使用这些SDK，因为微信JSSDK只能在微信浏览器中运行，如何检测是否是微信浏览器： const checkWxBrowser = _ => { const userAgent = navigator.userAgent.toLowerCase(); return userAgent.indexOf("micromessenger") !== -1; } 那么问题就到了如何接入微信开放JSSDK上来，微信官网说的很简单：一看就会，一做就废，官方说的都是基于生产环境下的场景，又要申请注册公众号、又要域名，那么测试环境怎么调试呢？不能都挪到生产环境上去测试吧，那样也太麻烦了。有没微信公众测试账号？有没有免费的测试域名？有没有在线签名生成接口？还真有，记住以下几个网址。本地调试关键网址微信测试号管理平台：提供测试的appID和appsecret，还可以进行一些配置，比如：JS接口安全域名等微信公众平台接口调试工具：根据appID和appsecret生成access_token https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={你刚刚获取的token}&type=jsapi：这个是一个接口，可以在浏览器直接访问，会返回ticket 微信 JS 接口签名校验工具：用于生成signature 生成时间戳网址...

02 Jan 2024

定义及开发自己的前端脚手架（cli）

持续更新…

30 Jul 2022

基于 ssh2 的本地包部署方案

最近在做项目的时候，经常需要发包到测试环境，由于测试环境没有流水线支撑，所以每次拷贝打包到测试服务器很是麻烦，于是就想弄了基于本地的一键部署工具（基于nodejs开发），通过简单配置即可上传本地包到服务器，既然是想将本增效，那么就需要满足以下需求：支持脚本模式，并保留最近三次的部署包（三次之前的包均删除），如：npm run deploy; 支持灵活配置多套环境，通过指定系统标示进行部署，如：npm run deploy [系统标示]、或者通过 .env中 Deploy_Server 节点指定系统标示、或者通过配置文件中 default节点指定的系统标示；支持检测本地代码的git状态，如果存在未提交代码，则不允许上传部署，通知支持强制模式，如npm run deploy --force；支持一键回滚，如npm run deploy --revert；支持通过npm全局安装此工具，方便多个工程独立配置部署方案，如 npm install -g localdeploy；支持在项目代码的根目录配置配置文件 deploy.config.js；在服务器发布目录，记录发布、回退日志，可跟踪查询；一、整体效果 deploy.config.js文件样例： export default { localPath:...

05 Jul 2022

基于 vite（rollup）的插件开发

说到插件开发，和webpack一样，基于vite（rollup）的打包流程，实现可插拔式的定制处理，比如新创建一个插件（myPlugin.js）,同样它也是基于nodejs来实现的，模板如下： export function viteBuildHtml(/自定义参数/params) { return { // 插件名字 name: "vite-build-html", // 定义在所有流程之前执行 enforce: "pre", //…… /** * 根据不同的钩子函数，定义相应的处理逻辑，打包流程会自动调用这些定义好的处理逻辑 * 钩子函数的名字要和 vite 、 rollup中定义好的名字保持一致 **/ 钩子函数1(/*参数*/params) { // TODO }, 钩子函数2(/*参数*/params) { // TODO },...

29 Jun 2022

基于 Vue2.0 从 webpack 4.* 切换到 vite 2.9.5

vite已经出了一段时间了，鉴于其启动及热更新速度的大幅提升，也逐渐被大家所熟知，具体原理可以参见vite的官方文档，这里就不多说了。当前项目组是基于webpack 4.*构建的，脚手架采用vue-cli那一套，随着项目维护人员几经易手，再加上项目代码量快速增加，启动速度已经非常慢，同时热更新的实时性也没有保障。借助着项目框架改造升级的机会，打算将工程化切换到vite上，毕竟是新东西，很多参考和样例都不足，跌跌撞撞，花了两个星期时间逐步将工程改造完毕，基于此将改造中遇到的问题，记录并分享出来，供大家参考。当前项目的技术栈：vue2.0 + elementUI 运行环境：node （v14.16.1）一、安装 Vite 环境 1. 安装依赖直接通过 npm install vite安装即可，接下来要兼容vue 2.0的使用场景，还需要安装以下几个依赖： vite-plugin-vue2 （vue 2.*的兼容依赖） @vue/compiler-sfc （单文件组件兼容依赖） @vue/composition-api （组合api的兼容依赖）备注：如果项目中使用了 css 预编译处理，比如我们用的是 scss，还需要安装 sass 依赖，vite 支持 sass 的开箱即用，所以没有之前烦人的 node-sass 安装的难题。...

01 Jun 2022

linux下nginx+ssl实现https访问

目前只尝试了在linux下进行实现。一、环境准备要编译nginx源码和生成ssl证书，需要linux环境下安装依赖模块： yum -y install gcc gcc-c++ automake pcre pcre-devel zlip zlib-devel openssl openssl-devel 二、下载nginx源码，编译nginx并添加ssl模块目前nginx默认版本中没有http_ssl_module模块，所以需要在nginx官网下载最新的nginx源码，然后编译nginx并添加SSL模块。这里我选择最新的稳定版本：nginx-1.16.0，下载源码包nginx-1.16.0.tar.gz；然后将下载的nginx源码拷贝到linux服务器上一个自定义目录中，进入该目录，然后解压nginx源码sudo tar -xzvf nginx-1.16.0.tar.gz。进入解压后的目录cd nginx-1.16.0 执行以下命令进行nginx源码编译配置： ./configure --prefix=./nginx --with-http_stub_status_module --with-http_ssl_module --with-pcre 注意：–prefix配置的是nginx的安装目录，这里配置安装到当前目录，–with配置是编译nginx时额外添加的模块，这里主要添加了http_ssl_module，其他模块可以选择安装。执行以下命令编译并安装nginx...

27 Jul 2019

利用Jekyll+Github Pages搭建一个技术博客

一、环境准备 Jekyll依赖于Ruby环境，Jekyll官网提供了具体的环境安装步骤：摘要：Jekyll is a Ruby program so you need to install Ruby on your machine to begin with. Head over to the install guide and follow the instructions for your operating system....