zwf193071的专栏

前言需求背景是（相信无论是做vue或react项目的童鞋都不会陌生）：需要将前端build之后的dist文件夹，部署至指定的服务器上，如何编写自动工具，实现自动化一键部署呢？正文编写插件在项目内的src目录下新增plugins目录，在该目录内新增deploymentProject.js文件，内容如下所示：const fs = require('fs')const path = require('path')const axios = require('axios')const AdmZip

前言这段时间，我想将原基于Vue2的npm包升级到Vue3，在完成Vue3框架的搭建后，执行yarn命令后，却不断地抛出下图错误：我查看当前npm registry，确定无误，且运行如下命令，可看到该npm包的各个版本号：npm view @babel/runtime versions解决这个问题确实诡异，registry库明明有@babel/runtime，为何始终显示该错误信息呢？原因我尚未找出，我使用如下命令，解决了yarn安装失败的问题yarn --registry https:/

前言前不久，产品经理A跑来对我说，你看，这项目（cloud-web）能不能只有jingzhe（目前项目里的一个独立的功能模块）？产品经理B又跑来对我说，我这个项目，既需要jingzhe，也需要yuyi（亦为一个独立的功能模块）我看了下项目结构，如下图所示，略微思索了一下，回答他们，可以views下面的这些模块，皆为独立的路由模块，比如本地jingzhe的访问路径为http:localhost:3000/jingzhechangeLog为日志模块，始终存在于各个不同的项目里如何编写脚手架，根据用

前言我正在搭一个脚手架，希望通过命令行终端自动下载git仓库的代码到本地，首先想到的库便是download-git-repo，部分代码如下所示：const download = require('download-git-repo');download('direct:https://gitee.com/xx/xxx.git', 'test', {clone: true}, (err) => { if (err) { console.log('executeDownload error =

@ant-design/icons源码解读从package.json开始读源码，我习惯从package.json里的scripts开始，从这里，可以看到该npm包发布前做了哪些事。"scripts": { "build": "npm run build:lib && npm run build:index-es && npm run build:umd", "build:lib": "cross-env NODE_ENV=production rimr

前言编写组件包时，执行npm run compile时，出现下面的提示错误解决办法执行npm i cross-env在package.json改变compile命令，在TS_NODE_PROJECT前加上cross-envcross-env TS_NODE_PROJECT=scripts/tsconfig.json node -r ts-node/register scripts/generate.ts --target=entry// 原来命令: TS_NODE_PROJECT=scri

问题使用vuepress本地跑的时候，可以看到组件效果，为何build之后，却看不到组件效果？原因vuepress不会打包docs以外的组件，比如，之前组件的存放位置如下所示：红框里存放着组件，导致build之后没有这些组件功能解决办法方式一：统一在.vuepress下的components里编写组件方式二：将原src下的components作为组件包@sf/map-graph发布，再在文档系统里引入该组件包即可个人比较倾向于方式二，毕竟方式一冗余且代码还得同步更新维护，极为不便...

前言想在vuepress支持的静态文档系统里，实时显示组件效果，需要哪些呢？请看正文正文首先在.vuepress的components里添加demo-block.vue<template> <div class="demo-block" :class="[blockClass, { 'hover': hovering }]" @mouseenter="hovering = true" @mouseleave="hovering = false"&

前言原生脚手架开发痛点重复性操作多package本地link多package依赖安装多package单元测试多package代码提交多package代码发布版本一致性发布时版本一致性发布后相互依赖版本升级package 越多管理难度越大lerna的优点大幅度减少重复提升操作的标准化lerna是架构优化的产物，它揭示了一个架构的真理：项目复杂度提升后就需要对项目进行架构优化。架构优化的主要目标往往以效能为核心所以，我选择了lerna作为包管理工具，但

问题执行npm run dist时，报如下错误：解决去node_modules/webpack/lib/RuleSet.js查看源码，并打上调试log信息再次执行npm run dist，命令行输出如下信息通过上图可以看出，babel-loader在webpack里的配置信息重复，查看webpack配置文件删除红框内容，即可成功运行...

前言vue内部，编写less文件，如何实现主题实时切换的功能呢？有一点要注意的是，在vue某个文件内，通过import方式引入less npm包，再less.modifyVars是无法实时修改主题的，因为此时的less文件已编译完毕，无法触发webpack的实时更新。要想实时切换主题，只能将less文件放在public目录下，但此时涉及到一个问题，组件内部less文件那么多，难道每次修改less文件，都得手动再在public目录下的color.less里改吗？有没有一种自动打包目录下的所有less文件，

simple-domThe simple Virtual Dom which includes vnode & h & patch and so on.Author：zwf193071E-mail: 997131679@qq.comdate: 2020/08/13PrefaceHow can I learn to write the Virtual Dom by myself? I am a green-hand, not having much experience

simple-packThe simple pack tool, which resembles webpack.How to packThe following steps:Parse a single file and extract its dependencies;Recursively build a dependency graph;Package everything into a single fileUsage根据项目根目录下的配置文件spack.config.js，将

zash-cliA simple CLI for generating pages into your projectsAuthor：zwf193071E-mail: 997131679@qq.comdate: 2020/07/29Preface这些页面都是相似的，为何要反复的拷贝来拷贝去？好不容易拷贝完，还得为新增的页面添加路由、左侧菜单和面包屑导航的功能，555…不甘心将时间浪费在这些细枝末节上，于是擦干眼泪，撸起袖子做了一套自动化生成页面的工具，希望能给后面的读者一些启示。F

亲测有效，找遍了很多网站，其实真正的步骤只有下面2个：1. 去淘宝镜像下载binging.node---https://npm.taobao.org/mirrors/node-sass/v4.14.1/win32-x64-64_binding.node,下载完成后存于D盘；2. 运行以下命令，即可成功按照node-sassnpm install node-sass -D --sass_binary_path=D:/win32-x64-64_binding.node成功截图：备注：np