快盘下载:好资源、好软件、快快下载吧!

快盘排行|快盘最新

当前位置:首页软件教程电脑软件教程 → vite+vue3+ts开发组件库,发布npm

vite+vue3+ts开发组件库,发布npm

时间:2022-09-24 13:25:08人气:作者:快盘下载我要评论

版本

vite 3.0.7 vue 3.2.27

所需依赖

@types/node 使用resolve解析项目路径 vite-plugin-dts 1.4.1 自动生成ts声明文件

步骤

1. 修改package.json

修改配置模块入口指向构建输出的js文件
"main": "./dist/my-lib.umd.cjs",
"module": "./dist/my-lib.js"
修改ts声明文件指向构建输出的js声明文件
"types": ".dist/components/index.d.ts"
配置模块导入对应关系
"exports": {
  ".": {
    "import": "./dist/my-lib.js",
    "require": "./dist/my-lib.umd.cjs"
  }
},
修改需要发布的文件清单
"files": [
  "package.json",
  "README.md",
  "LICENSE",
  "dist"
],
设置发布配置 默认私有发布,需要收费,这里配置公共发布
"publishConfig": {
  "registry": "https://registry.npmjs.org",
  "access": "public"
},

2. 修改vite配置vite.config.ts

启用lib模式配置vite-plugin-dts插件
import {resolve} from 'path'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from 'vite-plugin-dts'
// http://218.206.242.148:12345/images/20_tencent/20220924/dtxisyoncr5
export default defineConfig({
    plugins: [vue(), dts()],
    build: {
        lib: {
        	// 入口指向组件库入口模块
            entry: resolve(__dirname, 'src/components/index.ts'),
            name: 'my-lib',
            // 构建生成的文件名,与package.json中配置一致
            fileName: 'my-lib'
        },
        rollupOptions: {
            // 确保外部化处理那些你不想打包进库的依赖
            external: ['vue'],
            output: {
                globals: {
                    // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
                    vue: 'Vue'
                }
            }
        }
    }
})

3. 创建组件库入口模块

./components/index.ts

import MyComponent from "./my-component'"
import {App} from "vue";

// 按需导入用
export {
	MyComponent 
}
// 全局导入用
export default {
    install: (app: App) => {
        app.component('MyComponent', MyComponent)
    }
}

4. 构建项目

5. 发布npm

登录npm
npm login
发布(由于在package.json中指定了公共发布,这里不需要参数 --access public)
npm publish

相关文章

  • npm-切换源地址

    npm-切换源地址,【代码】npm 切换源地址。...
  • 安卓浏览器横评_flash浏览器

    安卓浏览器横评_flash浏览器,近日国外媒体Android Authority就对全球使下载最大的11款手机浏览器进行了性能方面的横向评测,相信在看完后,你能够从中找到更适合自己的手机浏览器。......

网友评论

快盘下载暂未开通留言功能。

关于我们| 广告联络| 联系我们| 网站帮助| 免责声明| 软件发布

Copyright 2019-2029 【快快下载吧】 版权所有 快快下载吧 | 豫ICP备10006759号公安备案:41010502004165

声明: 快快下载吧上的所有软件和资料来源于互联网,仅供学习和研究使用,请测试后自行销毁,如有侵犯你版权的,请来信指出,本站将立即改正。