utils
基于 rollup + typescript 封装常用的工具函数，利用 Jest 实现自动化测试；prettierrc + vscode 自定义工作区 保持代码风格一致；可在 react、vue 项目中使用。
架构目录
├── .vscode # vscode 自定义工作区
├── example # 浏览器直接运行示例
├── lib # 打包目录
├── src # 源码目录
│ ├── best # 性能优化函数
│ ├── detect # 类型判断
│ ├── device # 设备判断
│ ├── file # 文件操作
│ ├── number # 数字处理
│ ├── params # 参数处理
│ ├── reg # 正则判断
│ ├── time # 时间
│ └── index.ts # 导出
├── .babelrc # babel 配置
├── .eslintrc.js # eslint 配置
├── .gitignore # git忽略文件
├── .prettierrc # prettier 配置
├── jest.config.js # jest 配置
├── package.json # Node.js manifest
├── README.md # 文档说明
├── rollup.config.js # rollup 打包配置
└── tsconfig.json # typescript 配置基础使用
// 安装
yarn add -D @leslie0403/utils
// 使用
import { isMobile } from '@leslie0403/utils'
console.log(isMobile('18825040666'))
/**
* 方法集合
*/
// 基础校验
isIDCard // 身份证校验
isMobile // 手机号校验
isEmail // 邮箱校验
// 类型判断
isObject // 对象判断
// URL 参数
getParamFromURL // 提取 url 参数
formatUrl // 将url参数转化成对象
// 数字处理
toThousands // 数字千分为处理 如'1,234,567.45'
formatNum // 数字格式化，不进行四舍五入,默认保留2位小数点
// 时间函数
sleep // 延迟多少毫秒后继续执行
// 设备
getDevice // 获取手机操作系统类型
// 文件
saveBolbFile // 下载二进制文件
// 性能优化
debounce // 函数防抖
throttle // 函数节流开始
- 安装依赖
yarn add rollup -D
yarn add rollup-plugin-node-resolve -D
yarn add rollup-plugin-commonjs -D
yarn add rollup-plugin-json -D
yarn add @babel/node -D
yarn add @babel/core -D
yarn add @babel/preset-env -D
yarn add rollup-plugin-babel -D
yarn add rollup-plugin-terser -D项目中使用了 async/await， 报错 regeneratorRuntime is not defined
-
报错原因 这个报错表面上是由于 async function 语法被 babel 转译之后的代码使用了 regeneratorRuntime 这个变量，但是这个变量在最终的代码里未定义造成的报错。
-
方案 正确的做法是使用按需加载，将 useBuiltIns 改为 "usage"，babel 就可以按需加载 polyfill，并且不需要手动引入 @babel/polyfill
yarn add core-js@3 -D
// .babelrc 配置更新 useBuiltIns 按需引入 polyfill
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3,
"debug": false
}
]
]
}引入 typescript，增强代码的可读性
// 安装支持typescript插件
yarn add -D typescript
// rollup-plugin-typescript2
yarn add rollup-plugin-typescript2 -D
// tslib
yarn add tslib -D
// rollup.config.js
import typescript from 'rollup-plugin-typescript2';
plugins: [
typescript({
exclude: 'node_modules/**',
typescript: require('typescript'),
useTsconfigDeclarationDir: true, // 自动生成types 声明
}),
]
// 添加tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"lib": ["es2015", "es2016", "es2017", "dom"],
"sourceMap": true,
"declaration": true,
"declarationDir": "lib/types",
"typeRoots": ["node_modules/@types"],
"moduleResolution": "node",
"esModuleInterop": true
},
"exclude": ["./test", "./lib", "node_modules/"]
}
// package.json
"main": "lib/utils.umd.js",
"module": "lib/utils.esm.js",
"typings": "lib/types/index.d.ts",Jest 前端自动化测试
保证代码质量
- 简单使用
// 安装
yarn add jest -D
// package.json
"scripts": {
"test": "jest"
},
// 新建 .test.js文件 编写测试用例- 修改 jest 配置
// 运行
yarn jest --init
// 根据需求选择后 根目录生成jest.config.js- 支持 typesctipt 测试
// 安装
yarn add -D ts-jest @types/jest
// .test.js 文件全部改成 .test.ts
// jest.config.js 增加配置
transform: {
'^.+\\.tsx?$': 'ts-jest',
},
testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],eslint 配置
备注：vue-cli 创建的项目如果有 eslint 支持，不添加 eslint 支持会导致引入失败
// 安装
yarn add @typescript-eslint/parser -D
// 添加.eslintrc.js，是根目录; 最简单的配置；通过vue-cli的eslint规则
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
sourceType: 'module',
},
rules: {},
};发布到 npm
// 获取当前npm包镜像地址
npm get registry
// 设置回官方地址
npm config set registry https://registry.npmjs.org/
// 设置淘宝镜像地址
npm config set registry http://registry.npm.taobao.org/
// 登录
npm login
// 发布包
npm publish
// 发布私有域的包
npm publish --access=public
// 24小时内可撤销包；删除已在 npm 发布的同名包，需要在24小时后才能重新发布
npm unpublish --forcenpm 包发布到本地调试
// 源npm包安装到本地;在工具库根目录执行
yarn link
// 在npm目录下卸载
yarn unlink
// 在项目中使用 npm 包
yarn link "@leslie0403/utils"
// 在项目中卸载 npm 包
yarn unlink "@leslie0403/utils"小技巧-本地快速启动服务器 live-server or http-serve
// 全局安装
npm install -g live-server
// 切换到项目根目录,启动服务
live-server ./