hsja_tools
Version:
前端公共工具库 内置lodash-es 封装多个常用业务场景工具 致力提升开发效率 多点时间摸鱼
88 lines (73 loc) • 2.41 kB
Markdown
# 前端常用工具库
## 快速开始
- 安装npm包
````shell
npm i hsja_tools -S
pnpm install hsja_tools -S
````
- 打包工具使用方式
````javascript
// webpack
const HsjaTools = require('hsja_tools')
console.log(HsjaTools.isArray([0,1,2]));
// es 全部导入
import HsjaTools from 'hsja_tools'
console.log(HsjaTools.isArray([0,1,2]));
// es 按需导入
import {isArray} from 'hsja_tools'
console.log(isArray([0,1,2]));
````
- 直接html script直接引入 dist目录下的js文件 注意：**umd 格式文件会暴露一个全局变量** `HsjaTools`
````html
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>test测试</title>
<script type="module">
<!--es module 模式-->
import {isArray} from "./dist/hsja-tools.js";
console.log('isArray', isArray([1,2,3]));
// 函数内调用
function getIsArray(value){
import('./dist/hsja-tools.js').then(tools => {
const {isArray} = tools
console.log('getIsArray', isArray(value))
})
}
getIsArray([4,5,6])
// async await 方式
async function getHsjaTools(){
return await import('./dist/hsja-tools.js')
}
const {isNumber} = await getHsjaTools()
console.log('isNumber', isNumber(5))
</script>
<!--umd 格式文件 暴露一个全局变量 HsjaTools-->
<script src="./dist/hsja-tools.umd.cjs"></script>
<script>
console.log(HsjaTools)
console.log(HsjaTools.isArray([11]));
</script>
</head>
<body>
</body>
</html>
````
[pnpm Monorepo教程](https://blog.csdn.net/astonishqft/article/details/124823381)
````shell
## pnpm Monorepo安装包命令
pnpm --filter <package_selector> <command>
## 示例 @packages/utils 安装dayjs
pnpm --filter @packages/utils add dayjs
## 示例 公共安装dayjs
pnpm add dayjs -w
````
## 大概思路
1. core里面写一些 公共的原子函数 比如 `isObject`
2. utils里面写一些 业务常用的函数 比如 `上传` `下载`
3. 打包的时候 一起把他们打包到一个js中 并支持按需导入
4. umd格式 暴露一个全局变量 `HsjaTools`
## 一些记录
- 推送到npm库 `npm publish --access=public`
- `workspace: *` 发布包时候改成最新的npm版本号