vue3 + vite 编写组件并上传到npmjs

[heikaimu]

创建项目

yarn create @vitejs/app

在src下创建打包入口文件index.js

import TestComp from "./components/TestComp";
export default TestComp;

修改vite.config.js，添加打包lib配置

  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.js'),
      name: 'TestComp,
      fileName: format => `test-comp.${format}.js`
    },
    rollupOptions: {
      // 不想被打包进来的依赖
      external: [
        'vue'
      ],
      // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }

打包lib

vite build

打包完成后生成dist文件夹，包含文件style.css, test-comp.es.js, test-comp.umd.js

配置package.json

  "name": "test-comp",
  "version": "1.0.0",
  "files": [
    "dist"
  ],
  "module": "./dist/test-comp.es.js",
  "main": "./dist/test-comp.umd.js",
  "exports": {
    ".": {
      "import": "./dist/test-comp.es.js",
      "require": "./dist/test-comp.umd.js"
    },
    "./dist/style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  },

发布到npm

npm publish

使用组件

import TestComp from "test-comp";
import "test-comp/dist/style.css"