官網(wǎng)資料
構(gòu)建生產(chǎn)版本——庫模式
https://cn.vitejs.dev/guide/build.html#library-mode
詳細(xì)設(shè)置
https://cn.vitejs.dev/config/#build-lib
用 rollup 打包發(fā)布
以前只會(huì)用 webpack 的方式打包拼岳，用 vue-cli 建立項(xiàng)目枝誊，然后打包。這樣打的包比較大惜纸，里面“無用”的內(nèi)容比較多，我喜歡清爽型的绝骚，聽說 rollup 打包的內(nèi)容會(huì)少很多耐版，而且項(xiàng)目也都改用 vite 來創(chuàng)建，用 rollup 打包可以更方便一些压汪。
寫代碼
先寫一個(gè)簡單的功能做測(cè)試粪牲。
做一個(gè)獲取類型、判斷類型的小工具 http://www.reibang.com/p/422805e6f793 止剖。
這個(gè)代碼比較簡單腺阳，一個(gè)js文件即可落君，正好用來做測(cè)試。
建立一個(gè)新的 vite 項(xiàng)目亭引，建立 lib 文件夾绎速，里面設(shè)置一個(gè) main.js 文件
lib/main.js
/**
* 用 call 的方式獲取類型
* @param {*} val 要驗(yàn)證的實(shí)例
* @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 要驗(yàn)證的實(shí)例
* @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)
/**
* 驗(yàn)證普通函數(shù)
* @param {*} val 要驗(yàn)證的對(duì)象
* @returns
*/
const isFunction = (val) => toTypeString(val) === '[object Function]'
/**
* 驗(yàn)證 async 的函數(shù)
* @param {*} val 要驗(yàn)證的對(duì)象
* @returns
*/
const isAsync = (val) => toTypeString(val) === '[object asyncFunction]'
/**
* 驗(yàn)證 Object，不含 null
* @param {*} val 要驗(yàn)證的對(duì)象
* @returns
*/
const isObject = (val) => val !== null && typeof val === 'object'
/**
* 驗(yàn)證數(shù)組
* @param {*} val 要驗(yàn)證的對(duì)象
* @returns
*/
const isArray = Array.isArray
/**
* 驗(yàn)證字符串
* @param {*} val 要驗(yàn)證的對(duì)象
* @returns
*/
const isString = (val) => typeof val === 'string'
/**
* 驗(yàn)證 number
* @param {*} val 要驗(yàn)證的對(duì)象
* @returns
*/
const isNumber = (val) => typeof val === 'number'
/**
* 驗(yàn)證 BigInt
* @param {*} val 要驗(yàn)證的對(duì)象
* @returns
*/
const isBigInt = (val) => typeof val === 'bigint'
/**
* 驗(yàn)證 boolean
* @param {*} val 要驗(yàn)證的對(duì)象
* @returns
*/
const isBoolean = (val) => typeof val === 'boolean'
/**
* 驗(yàn)證正則類型
* @param {*} val 要驗(yàn)證的對(duì)象
* @returns
*/
const isRegExp = (val) => toTypeString(val) === '[object RegExp]'
/**
* 驗(yàn)證日期
* @param {*} val 要驗(yàn)證的對(duì)象
* @returns
*/
const isDate = (val) => val instanceof Date
/**
* 驗(yàn)證 map
* @param {*} val 要驗(yàn)證的對(duì)象
* @returns
*/
const isMap = (val) => toTypeString(val) === '[object Map]'
/**
* 驗(yàn)證 set
* @param {*} val 要驗(yàn)證的對(duì)象
* @returns
*/
const isSet = (val) => toTypeString(val) === '[object Set]'
/**
* 驗(yàn)證 Promise
* @param {*} val 要驗(yàn)證的對(duì)象
* @returns
*/
const isPromise = (val) => toTypeString(val) === '[object Promise]'
/**
* 驗(yàn)證 Symbol
* @param {*} val 要驗(yàn)證的對(duì)象
* @returns
*/
const isSymbol = (val) => typeof val === 'symbol'
/**
* null 或者 undefined 返回 true
* @param {*} val 要驗(yàn)證的對(duì)象
* @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, // 獲取可以識(shí)別的名稱
hasOwnProperty,
hasOwn,
isFunction, // 驗(yàn)證普通函數(shù)
isAsync, // 驗(yàn)證 async 的函數(shù)
isObject, // 驗(yàn)證 Object
isArray, // 驗(yàn)證數(shù)組
isString, // 驗(yàn)證字符串
isNumber, // 驗(yàn)證 number
isBigInt, // 驗(yàn)證 BigInt
isBoolean, // 驗(yàn)證 布爾
isRegExp, // 驗(yàn)證正則類型
isDate, // 驗(yàn)證日期
isMap, // 驗(yàn)證 map
isSet, // 驗(yàn)證 set
isPromise, // 驗(yàn)證 Promise
isSymbol, // 驗(yàn)證 Symbol
isNullOrUndefined // null 或者 undefined 返回 true
}
文件名
文件名應(yīng)該可以隨意寫焙蚓，只要在 vite.config.js 里面設(shè)置好即可纹冤，main.js 是參考官網(wǎng)設(shè)置的。jsDoc
jsDoc 可以在引用的地方出現(xiàn)提示购公，只是打包之后就沒有了萌京，也許必須用TS才能帶上提示嗎？
代碼寫好之后宏浩，我們開始做各種設(shè)置知残。
vite.config.js的設(shè)置
按照官網(wǎng)做設(shè)置，這里的寫法和官網(wǎng)有點(diǎn)區(qū)別比庄，但是測(cè)試可用求妹。
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: {
// 確保外部化處理那些你不想打包進(jìn)庫的依賴
external: ['vue'],
output: {
// 在 UMD 構(gòu)建模式下為這些外部化的依賴提供一個(gè)全局變量
globals: {
vue: 'Vue'
}
}
}
}
})
vite 會(huì)按照這里的設(shè)置進(jìn)行打包，打包分為兩種模式印蔗，一個(gè)是umd 的形式扒最，另一個(gè)就是es的模式，這個(gè)打包后和我們寫的代碼基本沒啥區(qū)別华嘹。
entry
指定要打包的入口文件吧趣。name
包的名稱fileName
包文件的名稱，默認(rèn)是umd和es兩個(gè)文件耙厚。sourcemap
是否生成 .map 文件强挫，默認(rèn)是不會(huì)生成的，如果需要的話需要設(shè)置為 true薛躬。rollupOptions
如果項(xiàng)目引用了第三方插件俯渤，那么需要在這里設(shè)置排除，如果不設(shè)置的話型宝，第三方插件的源碼也會(huì)被打包進(jìn)來八匠，這樣打包文件就變大了。排除之后第三方的插件會(huì)單獨(dú)存在趴酣。
package.json 的設(shè)置
這里是在 npmjs.com上面發(fā)布的時(shí)候需要的設(shè)置梨树，這里的設(shè)置要和vite.config.js的設(shè)置相對(duì)應(yīng)。
{
"name": "rollup-plugin-nf-typeof",
"version": "0.0.4",
"description": "驗(yàn)證JavaScript的數(shù)據(jù)類型岖寞。",
"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：版本號(hào)，每次發(fā)布都要更新一下版本號(hào)。
- files： 打包后的文件夾名稱指巡。
- 設(shè)置資源包的名稱：設(shè)置好就對(duì)了淑履，如果寫錯(cuò)了就會(huì)找不到文件。
發(fā)布
在npmjs.com上面發(fā)布的方式是一樣的藻雪。注冊(cè)秘噪、登錄、發(fā)布即可阔涉。
整理一下在 npmjs.com 上面發(fā)布資源包踩過的坑：http://www.reibang.com/p/3de34c804f64
安裝使用
這個(gè)包只是普通的 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的效果：
使用mao的效果：
使用map之后，就和我們寫的代碼一模一樣了瑰排，這樣調(diào)試起來就更方便贯要。
注意
這個(gè)并不是vite的插件，所以使用的時(shí)候不需要在vite.config.js里面做設(shè)置椭住。
如果是vite的插件崇渗，才需要做設(shè)置。
那么vite的插件如何編寫呢京郑？還沒有完全弄明白宅广。。些举。
