打包自定vue组件包

资料

• 主要参考vite网站的库打包示例：
  • https://cn.vite.dev/guide/build.html#library-mode

package.json 配置

• 配置文件：

{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"], //在项目中这是发布库的根目录
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    },
    "./style.css": "./dist/my-lib.css"
  },
  "peerDependencies": { //自己增加的，需要使用库的父组件安装的库
    "vue": "^3.0.0"  // 声明peer依赖
  },
  "devDependencies": {
     "vue": "^3.0.0"  //此处依赖，开发的时候可以用
  },
  "dependencies": {  //此处不依赖vue，发布的时候没有

  }
}

• 不知各配置参数含义的见： 这里

vite 配置文件

//vite.config.js
import { dirname, resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import { defineConfig } from 'vite'

const __dirname = dirname(fileURLToPath(import.meta.url))

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.js'),
      name: 'MyLib',
      // 将添加适当的扩展名后缀
      fileName: 'my-lib',
    },
    rollupOptions: {
      // 确保外部化处理那些
      // 你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖
        // 提供一个全局变量
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})

调试本地包

• 使用包的项目package.json 配置：

{
  "dependencies": {
    "bar": "file:../foo/bar"
  }
}

• 配置后，还要执行 npm install
  • 会在 node_modules下面建立一个软连接目录
• 注意：避免将 file:../path 配置提交到生产环境代码中。