官网资料
构建生产版本——库模式
https://cn.vitejs.dev/guide/build.html#library-mode
详细设置
https://cn.vitejs.dev/config/#build-lib
用 rollup 打包发布
以前只会用 webpack 的方式打包，用 vue-cli 建立项目，然后打包。这样打的包比较大，里面“无用”的内容比较多，我喜欢清爽型的，听说 rollup 打包的内容会少很多，而且项目也都改用 vite 来创建，用 rollup 打包可以更方便一些。
写代码
先写一个简单的功能做测试。
做一个获取类型、判断类型的小工具 https://www.jianshu.com/p/422805e6f793 。
这个代码比较简单，一个js文件即可，正好用来做测试。
建立一个新的 vite 项目，建立 lib 文件夹，里面设置一个 main.js 文件
lib/main.js
/**
* 用 call 的方式获取类型
* @param {*} val 要验证的实例
* @returns
* * '[object Object]',
* * '[object Array]',
* * '[object Map]',
* * '[object Set]',
* * '[object Function]',
* * '[object AsyncFunction]',
* * '[object Promise]',
* * '[object Symbol]',
* * '[object String]',
* * '[object Number]',
* * '[object BigInt]',
* * '[object RegExp]',
* * '[object Date]',
* * '[object Math]',
* * '[object Null]',
* * '[object Undefined]'
* * 其他
*/
const toTypeString = (val) => {
return Object.prototype.toString.call(val)
}
/**
* 获取具体类型
* @param {*} val 要验证的实例
* @returns
* * 'function',
* * 'async',
* * 'object',
* * 'array',
* * 'string',
* * 'number',
* * 'bigInt',
* * 'regExp',
* * 'date',
* * 'map',
* * 'set',
* * 'promise',
* * 'symbol',
* * 'math',
* * 'null',
* * 'undefined'
* * 其他
*/
const typeName = (val) => {
return Object.prototype.toString.call(val).replace(/^\[object (\S+)\]$/,'$1').toLowerCase()
}
const hasOwnProperty = Object.prototype.hasOwnProperty
const hasOwn = (val, key) => hasOwnProperty.call(val, key)
/**
* 验证普通函数
* @param {*} val 要验证的对象
* @returns
*/
const isFunction = (val) => toTypeString(val) === '[object Function]'
/**
* 验证 async 的函数
* @param {*} val 要验证的对象
* @returns
*/
const isAsync = (val) => toTypeString(val) === '[object asyncFunction]'
/**
* 验证 Object，不含 null
* @param {*} val 要验证的对象
* @returns
*/
const isObject = (val) => val !== null && typeof val === 'object'
/**
* 验证数组
* @param {*} val 要验证的对象
* @returns
*/
const isArray = Array.isArray
/**
* 验证字符串
* @param {*} val 要验证的对象
* @returns
*/
const isString = (val) => typeof val === 'string'
/**
* 验证 number
* @param {*} val 要验证的对象
* @returns
*/
const isNumber = (val) => typeof val === 'number'
/**
* 验证 BigInt
* @param {*} val 要验证的对象
* @returns
*/
const isBigInt = (val) => typeof val === 'bigint'
/**
* 验证 boolean
* @param {*} val 要验证的对象
* @returns
*/
const isBoolean = (val) => typeof val === 'boolean'
/**
* 验证正则类型
* @param {*} val 要验证的对象
* @returns
*/
const isRegExp = (val) => toTypeString(val) === '[object RegExp]'
/**
* 验证日期
* @param {*} val 要验证的对象
* @returns
*/
const isDate = (val) => val instanceof Date
/**
* 验证 map
* @param {*} val 要验证的对象
* @returns
*/
const isMap = (val) => toTypeString(val) === '[object Map]'
/**
* 验证 set
* @param {*} val 要验证的对象
* @returns
*/
const isSet = (val) => toTypeString(val) === '[object Set]'
/**
* 验证 Promise
* @param {*} val 要验证的对象
* @returns
*/
const isPromise = (val) => toTypeString(val) === '[object Promise]'
/**
* 验证 Symbol
* @param {*} val 要验证的对象
* @returns
*/
const isSymbol = (val) => typeof val === 'symbol'
/**
* null 或者 undefined 返回 true
* @param {*} val 要验证的对象
* @returns
*/
const isNullOrUndefined = (val) => {
if (val === null) return true
if (typeof val === 'undefined') return true
return false
}
export {
toTypeString, // Object.prototype.toString.call(val)
typeName, // 获取可以识别的名称
hasOwnProperty,
hasOwn,
isFunction, // 验证普通函数
isAsync, // 验证 async 的函数
isObject, // 验证 Object
isArray, // 验证数组
isString, // 验证字符串
isNumber, // 验证 number
isBigInt, // 验证 BigInt
isBoolean, // 验证 布尔
isRegExp, // 验证正则类型
isDate, // 验证日期
isMap, // 验证 map
isSet, // 验证 set
isPromise, // 验证 Promise
isSymbol, // 验证 Symbol
isNullOrUndefined // null 或者 undefined 返回 true
}
-
文件名
文件名应该可以随意写，只要在 vite.config.js 里面设置好即可，main.js 是参考官网设置的。 -
jsDoc
jsDoc 可以在引用的地方出现提示，只是打包之后就没有了，也许必须用TS才能带上提示吗？
代码写好之后，我们开始做各种设置。
vite.config.js的设置
按照官网做设置，这里的写法和官网有点区别，但是测试可用。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 主要用于alias文件路径别名
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// 打包配置
build: {
lib: {
entry: resolve(__dirname, 'lib/main.js'),
name: 'rollup-plugin-nf-typeof',
fileName: (format) => `rollup-plugin-nf-typeof.${format}.js`
},
sourcemap: true,
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: ['vue'],
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: 'Vue'
}
}
}
}
})
vite 会按照这里的设置进行打包，打包分为两种模式，一个是umd 的形式，另一个就是es的模式，这个打包后和我们写的代码基本没啥区别。
-
entry
指定要打包的入口文件。 -
name
包的名称 -
fileName
包文件的名称，默认是umd和es两个文件。 -
sourcemap
是否生成 .map 文件，默认是不会生成的，如果需要的话需要设置为 true。 -
rollupOptions
如果项目引用了第三方插件，那么需要在这里设置排除，如果不设置的话，第三方插件的源码也会被打包进来，这样打包文件就变大了。排除之后第三方的插件会单独存在。
package.json 的设置
这里是在 npmjs.com上面发布的时候需要的设置，这里的设置要和vite.config.js的设置相对应。
{
"name": "rollup-plugin-nf-typeof",
"version": "0.0.4",
"description": "验证JavaScript的数据类型。",
"files": ["dist"],
"main": "./dist/rollup-plugin-nf-typeof.umd.js",
"module": "./dist/rollup-plugin-nf-typeof.es.js",
"exports": {
".": {
"import": "./dist/rollup-plugin-nf-typeof.es.js",
"require": "./dist/rollup-plugin-nf-typeof.umd.js"
}
},
"private": false,
"license": "MIT",
"auther": "jin yang (jyk) jyk0013@163.com",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
}
}
- name： 资源包的名称。
- version：版本号，每次发布都要更新一下版本号。
- files： 打包后的文件夹名称。
- 设置资源包的名称：设置好就对了，如果写错了就会找不到文件。
发布
在npmjs.com上面发布的方式是一样的。注册、登录、发布即可。
整理一下在 npmjs.com 上面发布资源包踩过的坑：https://www.jianshu.com/p/3de34c804f64
安装使用
这个包只是普通的 webpack 的包，所以正常安装即可：
npm i rollup-plugin-nf-typeof
或者
yarn add rollup-plugin-nf-typeof
组件里面使用：
import { isArray } from 'rollup-plugin-nf-typeof'
const arr = []
console.log(isArray(arr))
使用效果
没有使用map的效果：
无map
使用mao的效果：
有map
使用map之后，就和我们写的代码一模一样了，这样调试起来就更方便。
注意
这个并不是vite的插件，所以使用的时候不需要在vite.config.js里面做设置。
如果是vite的插件，才需要做设置。
那么vite的插件如何编写呢？还没有完全弄明白。。。
网友评论