npm组件发布

vite+vue3+npm组件发布

index.js导出组件 
const components = [comA, comB, comC] //封装好的组件
const install = function(App, options){
	components.forEach(component=>{
	App.component(components.name, component)
	})
}
export default {install} //代码引入
vite.config.js 
build:{
    outDir:'dist',
    lib:{
      entry: path.resolve(__dirname, 'src/index.js'),
      name:'fishCommon',
      fileName:(format)=>`fish-common.${format}.js`
    },
    rollupOptions:{
      external:['vue'],//外部化处理不想打包进库的依赖
      output:{
        globals:{ //UMD构建模式下为这些外部依赖提供一个全局变量
          vue:'vue'
        }
      }
    }
  }
package.json 
 "name": "fish-common",
 "private": false,
 "version": "1.0.4",
 "files": ["dist"],
 "main": "./dist/fish-common.umd.js",
 "module": "./dist/fish-common.es.js",
 "exports": {
    ".": {
      "import": "./dist/fish-common.es.js",
      "require": "./dist/fish-common.umd.js"
    }
  }

发布

yarn publish

引入发布的包

yarn add --dev fish-common //跟package.json中的name对应

配置 main.js

import fishCommon from 'fish-common'
app.use(fishCommon)

参考

posted @ 2022-06-02 11:09  Dried-salted-fish  阅读(54)  评论(0)    收藏  举报