假设我们在项目中，有一些比较通用的函数，比如：解析url, 复制对象，
我们用一个js文件保存这些通用的函数，用导出的方法来使用，他就是一个函数库了。
痛点是：如果多个项目使用这个函数库，我们就要考虑使用和维护优化的地方了，不然会导致添加或者修改函数库， 多个项目需要手动同步的问题
所以我们的函数库需要用到npm来做版本管理， 这样这个函数库就能更好的发挥他的能力
一个函数库应该具备
-
npm
版本管理 -
支持
按需引入 -
提供
多种模块导出方式 -
通过单元测试
-
文档
然后我们需要ts语法，加上了
- 支持
ts语法
为了团队维护方便，加上了
-
自动化构建模板
选择打包工具构建
在开始的时候我们可以选一个打包工具：rollup或webpack
使用rollup构建
全局安装rollup
npm install rollup --global
-
构建项目目录
image.png
1.新建src/main.js, 这里只将index的模块全部暴露出去
export * from './components/index'
2.新建package.json, 添加需要的依赖，包括rollup，typescript，还有rollup的两个插件/plugin-babel，plugin-typescript。
{
"name": "rollup_demo",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"build": "rollup -c"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@rollup/plugin-babel": "^6.0.0",
"@rollup/plugin-typescript": "^8.5.0",
"rollup": "^2.79.1",
"rollup-plugin-json": "^4.0.0",
"tslib": "^2.4.0",
"typescript": "^4.8.4"
}
}
3.新增rollup.config.js配置文件
// rollup.config.js
import json from 'rollup-plugin-json'
import typescript from '@rollup/plugin-typescript'
import pkg from './package.json'
export default {
input: 'src/main.ts',
output: [
{
name: pkg.name,
file: pkg.main,
format: 'umd'
}
],
plugins: [
json(),
typescript({lib: ["es5", "es6", "dom"], target: "es5"})
]
};
4.编辑函数, 这里以一个很简单的检验手机号的函数为例，在src/components里添加一个模块函数isMobile.ts，里面很简单就用正则判断了下手机号 ，我们这里直接用ts文件后缀
export default function isMobile(v: any): boolean {
return /^1[0-9][0-9]\d{8}$/.test(v)
}
然后引入到index.ts里再统一暴露出去
import isMobile from './isMobile'
export {
isMobile
}
5.运行打包命令 rollup -c 或者我们定义的npm run build， 在dist里面会出现打包好的文件。
6.验证
把打包好的dist/index.js文件放到在一个项目里， 导入isMobile函数验证
import {isMobile} from './index.js'
...
console.log('手机号是否正确', isMobile('13680988189'))
使用webpack构建
- 安装webpack & webpack-cli
npm install --global webpack // 全局安装webpack
npm install webpack webpack-cli --save-dev // 此工具用于在命令行中运行 webpack
1.src里的文件保持不变
2.新建package.json
{
"name": "ts-util-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^8.0.11",
"typescript": "^4.1.2",
"webpack": "^5.8.0",
"webpack-cli": "^4.2.0"
}
}
3.新建webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.ts', // 入口
output: {
filename: 'index.umd.js',
path: path.resolve(__dirname, 'dist'),
library: 'tsUtil',
libraryTarget: 'umd' // 导出模块为umd
}
}
- 添加支持typescript
安装tsloader
npm install --save-dev typescript ts-loader
新建ts.config.js文件
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}
改造webapck.config.js添加ts支持
const path = require('path');
module.exports = {
entry: './src/main.ts',
output: {
filename: 'index.umd.js',
path: path.resolve(__dirname, 'dist'),
library: 'tsUtil',
libraryTarget: 'umd'
},
// 模块, 使用tsloader解析ts文件
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
}
- 打包验证
运行npx webapck即可打包, 我们可以看到打包出了我们想要的文件：dist/index.umd.js, 同样的验证方法
import {isMobile} from './index.umd.js'
...
console.log('手机号是否正确', isMobile('13680988189'))
发布到npm
发布到官方npm库
-
运行
npm init初始化，会让你填内容，用默认的就好了 -
运行
npm login登录账号，还没有的话去npm官网注册一个 -
运行
npm publish发布 注意这里要用npm官方源，不能用淘宝源
发布到JFrog私有库中
- 运行
npm init初始化，会让你填内容，用默认的就好了 - 切换镜像到私有库
npm config set registry 私有库地址
- 因为私有库账号密码是公司邮箱，但是npm login又无法使用@特殊字符，所以我们去配置.npmrc，位置在C:\Users\yu.li2中
在JFrog中右上角个人中心生成一个秘钥，使用秘钥去请求JFrog接口。
URL:公司JFrog地址/artifactory/api/npm/auth
Headers:{
Authorization:Bearer 秘钥
}
该接口会返回_auth字符，复制过后，添加到.npmrc中，然后就可以发布包和下载包
网友评论