持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第32天，点击查看活动详情
本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。
简单讲玩具vite、ni、open、remote-git-tags 、 promisify、element 初始化组件功能的作用、原理和亮点。
旨在总结、复习，温故知新。
11、（玩具vite）vue-dev-server
作用
小型vite，方便理解vite启动原理
原理
1 大多浏览器现在支持
esm的import语法，在入口html去import入口js文件2 开启服务拦截前端请求
3 服务端转换文件后返回给前端执行
对
vue，使用@vue/component-compiler进行转化成js返回对包依赖，直接返回
node_module里的文件
学
1
require.resolve(依赖包名)可以直接拿到node_modules下的绝对路径
require.resolve('vue')为C:。。。vue-dev-server\node_modules\vue\dist\vue.runtime.common.js2 解析
js文件用的是recast库，ast转化 这里面水很深
12、ni
作用
ni - use the right package manager
比如在命令行输入ni，相当于 npm install 或者 yarn、pnpm install，
它根据当前环境的yarn.lock/pnpm-lock.yaml/package-lock.json文件来判断选择哪个包管理器来执行
有很多命令，具体看下方：
`ni` - install
`nr` - run
`nx` - execute
`nu` - upgrade
`nci` - clean install
`nrm` - remove
原理
1 根据锁文件猜测用哪个包管理器 npm/yarn/pnpm（都没找到问安装哪个）
2 抹平不同的包管理器的命令差异
3 execa 工具 运行相应的脚本
学
判断电脑里有没安装yarn等命令，那代码属实超标了
13、open
作用
每次启动项目的服务，电脑竟然乖乖的帮我打开了浏览器
# mac
open https://lxchuan12.gitee.io
# win 在终点我敲了一下这个，确实直接调浏览器进入了这个网页。厉害的
start https://lxchuan12.gitee.io
# linux
xdg-open https://lxchuan12.gitee.io
场景：webpack、vue-cli和create-react-app
原理
1.辨别平台 2.构建相应平台的启用浏览器的命令 3.使用
Node.js的子进程child_process模块的spawn方法执行
学
川哥说使用 spawn 而不是 exec 会更安全。
可以查询哪些包依赖该包 www.npmjs.com/browse/depe…
14、remote-git-tags & promisify
作用
从远程仓库获取所有标签。
import remoteGitTags from 'remote-git-tags';
console.log(await remoteGitTags('https://github.com/lxchuan12/blog.git'));
//=> Map {'3.0.5' => 'c39343e7e81d898150191d744efbdfe6df395119', …}
原理
就是用命令行执行git命令罢了
repoUrl = 'https://github.com/lxchuan12/blog.git'
childProcess.execFile('git', ['ls-remote', '--tags', repoUrl]);
学
引用
node原生库可以加node:前缀，比如import util from 'node:util'用
childProcess.execFile去执行命令行，是会把输出放在对象的stdout属性里的
promisify
-----例子
const loadImagePromise = promisify(loadImage);
async function load(){
try{
const res = await loadImagePromise(imageSrc);
console.log(res);
}
catch(err){
console.log(err);
}
}
load();
-----怎么实现，难以言喻
function promisify(func){
let fun = function(...args){
return new Promise((res,rej)=>{
args.push((err,success)=>{//success=>...values
if(err){
rej(err)
return
}
res(success)//success=>values
})
func.apply(this,args)
})
}
}
---
15、element 初始化组件功能
作用
命令行一键生成组件相关文件并引入 make new ruochuan 若川组件
原理
拿到组件名，通过模板，依次渲染，并生成文件
添加导入组件信息
学
make类似npm run，npm run是跑package.json里 的script,make是跑makefile里的
