一个好用的工具类库
从 0 到 1 配合ts使用webpack5搭建一个通用的组件库，支持ts编写工具函数，收集一些项目好用的工具函数
- 🔥
webpack5、typescript、babel、...
|----config // webpack打包相关配置文件
|---webpack.common.ts // webpack 公用配置
|---webpack.dev.ts // webpack 开发环境配置
|---webpack.prod.ts // webpack 生产环境配置
|---webpack.target.ts // 打包umd,cjs,esm模式的代码
|----example // 测试代码
|----src // 源码入口
| |---index.ts // 源码入口文件
| |---formateUrl.ts // 格式化url
| |---....
| type
|-----package.json // 安装依赖包必须的文件
|-----tsconfig.json // ts环境相关的配置
|-----webpack.config.ts // webpack打包的入口文件依赖nodejs,先下载对应 node,我的 node 版本是v14.17.0,由于使用最新webpack5,建议安装比较新的node版本，不然可能会存在兼容性问题,下载node参考官方地址
1、 git clone https://github.com/maicFir/nice_utils.git
2、 cd nice_utils
3、 npm i
执行以下命令
npm run start打开谷歌地址http://localhost:8080,mac(option + command +i)打开开发者模拟器，选择不同设备进行查阅页面，window(右键审查/f12 选择模拟器)打开页面访问
在src中新增对应工具函数，然后测试其效果
// example/index.ts
import * as nice_utils from '../src/index';
console.log(nice_utils);
console.log('formateUrl:', nice_utils.formateUrl('http://www.example.com?name=Maic&age=18'));
console.log('hasOwn:', nice_utils.hasOwn({ publictext: 'Web技术学苑' }, 'publictext'));
console.log('isType:', nice_utils.isType('Web技术学苑')('String'));npm run build在根目录下生成dist
formateUrl
const nice_utils = require('@maicfir/nice_utils');
// 使用示例
nice_utils.formateUrl('http://www.example.com?name=Maic&age=18'); // {name: 'Maic',age: 18}getOrigin
const nice_utils = require('@maicfir/nice_utils');
nice_utils.getOrigin(); // 获取当前访问的域名hasOwn
const nice_utils = require('@maicfir/nice_utils');
nice_utils.hasOwn({ name: '张三' }, 'name'); // true name 是不是在对象中isType
const nice_utils = require('@maicfir/nice_utils');
nice_utils.isType('')('String'); // true 判断是不是字符串类型lazyFunction
const nice_utils = require('@maicfir/nice_utils');
const fn = nice_utils.lazyFunction(() => require('../xxx/index.js')); //函数懒加载memorize
const { memorize } = require('@maicfir/nice_utils');
const fn = memorize(() => console.log(111));mergeDeep
const { mergeDeep } = require('@maicfir/nice_utils');
mergeDeep({}, { a: 1, b: 2, info: { a: 1, b: 1 } });timerChunk
const { timerChunk } = require('@maicfir/nice_utils');
const fn = timerChunk([], (res) => {
console.log(res);
});
const ret = fn();
console.log(ret);
-
看完项目如果觉得对你有帮助，就点个
star鼓励下作者哈 -
更多技术关注
公众号:Web技术学苑，好好学习、天天向上!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent