vite2的库项目，打包发布到npmjs.com的方法

官网资料

构建生产版本——库模式
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) [email protected]",
  "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的插件如何编写呢？还没有完全弄明白。。。