持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第33天，点击查看活动详情
本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。
简单讲only-allow、js-cookie、delay、axios工具函数、install-pkg功能的作用、原理和亮点。
旨在总结、复习，温故知新。
16、only-allow
作用
规范 包管理器
在项目安装依赖时如果用的包管理器不对，提示改用正常的包管理器
{
"scripts": {
"preinstall": "npx only-allow pnpm -y"
}
}
相当于
# vue3
"scripts": {
"preinstall": "node ./scripts/preinstall.js",
}
// vue-next/scripts/preinstall.js
if (!/pnpm/.test(process.env.npm_execpath || '')) {
console.warn(
`\u001b[33mThis repository requires using pnpm as the package manager ` +
` for scripts to work properly.\u001b[39m\n`
)
process.exit(1)
}
我觉得这个挺有用，很多人习惯 npm，一时要改也有点麻烦，强制要求很有必要
原理
1 获取命令行传过来的要规范的包管理器，
npm pnpm yarn都不是，则报错2 获取当前使用的包管理器和当前的对比，不等就报提醒
学
1 用
'which-pm-runs'可以知道当前使用的包管理器2
preinstall是用户安装依赖前会触发的钩子3
process.env.npm_execpath,获取执行路径，得当前包管理环境
输出
D:\nodejs\node_global\node_modules\pnpm\bin\pnpm.cjs，可以用
/pnpm/.test(process.env.npm_execpath4
process.env.npm_config_user_agent，获取包和版本
- 输出
pnpm/6.19.0 npm/? node/v14.15.3 win32 x64，.split(' ')[0]5
vue3中抵制用substr，而是用slice，因为他不是js标准语言的一部分，而是遗留的函数
17、 js-cookie
作用
https://www.npmjs.com/package/js-cookie
import Cookies from 'js-cookie'
Cookies.set('foo', 'bar')
get
del
Cookies.withAttributes({ path: '/', domain: '.example.com' })
withConverter
流程
用
init函数创建对象，对象里有以下函数
get 函数：将
document.cookie字符串转化为 Object 形式，转化过程中判断是否在存 key，如果有就返回对应 valueset 函数：把
attributesstringify，然后追加到 key=value 后，document.cookie = ${key}=${value}${attrStr}del 函数：调用
set，把 expires 设置为 -1 天，cookie 直接过期被删除withAttributes：更新 attributes 属性配置，并返回全新 Cookie 对象
const api = Cookies.withAttributes({ path: '/', domain: '.example.com' })withConverter：更新 converter 解码配置，并返回全新 Cookie 对象
这是npm文档的，用的write和read，而这篇文章教学应该用的encode和decode Cookies.withConverter({ write: function (value, name) { return value.toUpperCase() } })
学
1
cookie的结构：以;分隔开，等号左边是key，右边是value2 过期时间用的是
UTC格式，'Thu, 30 Jun 2022 03:20:32 GMT'3 过期时间设为
-1自动失效4
Object.freezereturn Object.create( {get, set, del, withConverter, withAttributes}, { converter: {value: Object.freeze(initConverter)}, // 被冻动了 attributes: {value: Object.freeze(initAttributes)}, // 被冻动了 } ) 可以防止 Cookies.attributes = 1 直接改了
18、delay
作用
延迟函数，可以取消和提前结束。
原理
延迟：
const delay1 = (ms)=>new Promise((resolve)=>{setTimeout(resolve,ms)})结束：定时器清除并执行原函数
取消：
AbortController.abort()developer.mozilla.org/zh-CN/docs/…
学
以前 弄出延迟函数const delay1 = (ms)=>new Promise((resolve)=>{setTimeout(resolve,ms)})，
再弄取消我可能会直接delay1.cancel = funciton(){} 去写，事实上，应该封装一下，这样也方便拓展，比较规范，一眼看出有什么方法
const createWithTimers = () => {
const delay = createDelay({willResolve: true});
delay.reject = createDelay({willResolve: false});
delay.range = (minimum, maximum, options) => delay(randomInteger(minimum, maximum), options);
return delay;
}
19、axios工具函数
作用
多是用来判断对象类型的
学
- 基础类型
typeof val === 'undefined'; val !== null && typeof val === 'object';
- 引用类型
toString.call(val) === '[object Array]'; Object.prototype.toString.call(val) === '[object Date]'; Object.prototype.toString.call(val) === '[object File]'; Object.prototype.toString.call(val) === '[object Blob]'; Object.prototype.toString.call(val) === '[object Function]';
- 其他
(typeof FormData !== 'undefined') && (val instanceof FormData); typeof URLSearchParams !== 'undefined' && val instanceof URLSearchParams; 流： function isStream(val) { return isObject(val) && isFunction(val.pipe); }
20、install-pkg
作用
以编程式的方法去安装依赖
npm i @antfu/install-pkg
import { installPackage } from '@antfu/install-pkg'
await installPackage('vite', { silent: true })
用到的项目：点击 Dependents 查看
原理
1 通过锁文件判断是用什么包管理器
2 用
execa执行 拼起来的安装依赖的命令
学
1 开发构建一个
ts的npm包，用的tsup打包
"build": "tsup src/index.ts --format cjs,esm --dts --no-splitting",2 一个
github action案例，在推送新tag版本时触发，负责安装依赖，测试和发布3 用
esno运行ts
"start": "esno src/index.ts"4
eslint预设，pnpm add -D eslint @antfu/eslint-config
- 添加
.eslintrc文件// .eslintrc { "extends": ["@antfu"], "rules": {} }JavaScript/TypeScript linter (ESLint wrapper) with great defaults JavaScript/TypeScript linter（ESLint 包装器）具有很好的默认值
