vite的项目，使用 rollup 打包的方法

官网资料

构建生产版本——库模式
https://cn.vitejs.dev/guide/build.html#library-mode

详细设置
https://cn.vitejs.dev/config/#build-lib

技术栈

• vite
• rollup

打包方式

vue-cli 自带的是 webpack 的打包方式，打出的包体积有点大，而 vite 自带的是 rollup 的打包方式，这种方式打包的体积就非常小，官网也有一些使用说明，所以学会之后还是比较很方便的。

vite 的库项目可以分为两类：（我自己分的）

• 一个是纯js的项目，不带HTML；
• 一个是可以带上HTML（模板）的项目，比如UI库。

下面分别介绍一下编写和打包方式，其实大同小异。

纯js的库项目

使用 vite 建立项目，这里举一个简单的例子：

// main.js

 
  const toTypeString = (val) => { 
    return Object.prototype.toString.call(val)
  }
  
  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)

  const isFunction = (val) => toTypeString(val) === '[object Function]'
  const isAsync = (val) => toTypeString(val) === '[object AsyncFunction]'
  const isObject = (val) => val !== null && typeof val === 'object'
  const isArray = Array.isArray
  const isString = (val) => typeof val === 'string'
  const isNumber = (val) => typeof val === 'number'
  const isBigInt = (val) => typeof val === 'bigint'
  const isBoolean = (val) => typeof val === 'boolean'
  const isRegExp = (val) => toTypeString(val) === '[object RegExp]'
  const isDate = (val) => val instanceof Date
  const isMap = (val) => toTypeString(val) === '[object Map]'
  const isSet = (val) => toTypeString(val) === '[object Set]'
  const isPromise = (val) => toTypeString(val) === '[object Promise]'
  const isSymbol = (val) => typeof val === 'symbol'
  const isNullOrUndefined = (val) => {
    if (val === null) return true
    if (typeof val === 'undefined') return true
    return false
  }

  function log(){
    if (window.__showlog) console.log(...arguments)
  }
  const logTime = (msg, auto = true) => {
    const start = () => {
      if (window.__showlog) console.time(msg)
    }
    const end = () => {
      if (window.__showlog) console.timeEnd(msg)
    }
    if (auto) start() // 自动开始计时
    return { start, end }
  }

export {
  log, // 打印调试信息
  logTime, // 计时
  toTypeString, // Object.prototype.toString.call(val)
  typeName, // 获取可以识别的名称

  hasOwnProperty,
  hasOwn,

  isFunction, // 验证普通函数
  isAsync, // 验证 async 的函数
  isPromise, // 验证 Promise
  isObject, // 验证 Object
  isArray, // 验证数组
  isString, // 验证字符串
  isNumber, // 验证 number
  isBigInt, // 验证 BigInt
  isBoolean, // 验证 布尔
  isRegExp, // 验证正则类型
  isDate, // 验证日期
  isMap, // 验证 map
  isSet, // 验证 set
  isSymbol, // 验证 Symbol
 
  isNullOrUndefined // null 或者 undefined 返回 true
}

代码比较简单，仅仅只是演示。

想要打包的话，只能有一个出口文件，所以内部的代码结构要设置好。

带HTML的库项目

纯js的好办了，export 输出就好，那么带模板的怎么办呢？其实也是一样的。

用 vite 建立一个项目，建立一个测试文件：

// t-text.vue

• 模板部分：