rollup打包vue组件并发布到npm的方法

更新时间：2023年05月25日 11:57:40 作者：UzumakiHan

这篇文章主要介绍了rollup打包vue组件并发布到npm,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

基本的工程化插件

@rollup/plugin-node-resolve 帮助 rollup 识别外部模块
@rollup/plugin-babel babel插件将es6+转为es5
rollup-plugin-copy 直接复制静态文件
@rollup/plugin-terser 压缩代码
@rollup/plugin-commonjs 将commonjs模块转为es模块
@rollup/plugin-typescript typescript插件
@rollup/plugin-alias 路径别名

npm i @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-terser rollup-plugin-vue @rollup/plugin-typescript @babel/core - D

处理Vue文件

rollup-plugin-vue

用于处理.vue文件。vue2和vue3项目所用的rollup-plugin-vue版本不一样，vue的编译器也不一样。

vue2：rollup-plugin-vue^5.1.9 + vue-template-compiler
vue3：rollup-plugin-vue^6.0.0 + @vue/compiler-sfc

npm i vue-template-compiler @vue/compiler-sfc -D

vue2和vue3版本的plugins可以这样在devDependencies中指定,，然后npm install

"devDependencies":{
    "rollup-plugin-vue2": "npm:rollup-plugin-vue@^5.1.9",
    "rollup-plugin-vue3": "npm:rollup-plugin-vue@^6.0.0",
}

打包CSS插件

rollup-plugin-postcss 识别css和预处理文件（如果css，rollup-plugin-postcss需要配合sass使用）

这里我以分别vue2和vue3各创建一个rollup.config.js

vue2-----rollup.vue2.config.js，配置如下

import resolve from '@rollup/plugin-node-resolve';
import vue2 from 'rollup-plugin-vue2';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';
import json from '@rollup/plugin-json';
import postcss from 'rollup-plugin-postcss'
import typescript from "@rollup/plugin-typescript";
export default {
    input: 'src/index.ts',
    output: {
        globals: {
            vue: "Vue"
        }
    },
    plugins: [
        resolve(),
        typescript(),
        terser(),
        json(),
        vue2({
            css: true,
            compilerTemplate: true,
            preprocessStyles: true
        }),
        babel({
            exclude: "**/node_modules/**"
        }),
        commonjs(),
        postcss()
    ]
}

vue3-----rollup.vue3.config.js，配置如下

import resolve from '@rollup/plugin-node-resolve';
import vue3 from 'rollup-plugin-vue3';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';
import json from '@rollup/plugin-json';
import postcss from 'rollup-plugin-postcss'
import typescript from '@rollup/plugin-typescript';
export default {
    input: 'src/index.ts',
    output: {
        globals: {
            vue: "Vue"
        }
    },
    plugins: [
        resolve(),
        typescript(),
        terser(),
        json(),
        vue3({
            css: true,
            compilerTemplate: true,
            preprocessStyles: true
        }),
        babel({
            exclude: "**/node_modules/**"
        }),
        commonjs(),
        postcss()
    ]
}

配置打包命令，这里我把cjs、umd、es、iife都分别打包出来了

"scripts": {
    "build": "npm run build:vue3 && npm run build:vue2",
    "build:vue2": "rimraf dist/vue2/* && npm run build:umdvue2 && npm run build:esvue2 && npm run build:unpkgvue2 && npm run build:cjsvue2",
    "build:umdvue2": "rollup -c rollup.vue2.config.js --format umd --name mList --file dist/vue2/index.umd.js",
    "build:esvue2": "rollup -c rollup.vue2.config.js --format es --file dist/vue2/index.esm.js",
    "build:unpkgvue2": "rollup -c rollup.vue2.config.js --format iife --file dist/vue2/index.min.js",
    "build:cjsvue2": "rollup -c rollup.vue2.config.js --format cjs --file dist/vue2/index.cjs.js",
    "build:vue3": "rimraf dist/vue3/* && npm run build:umdvue3 && npm run build:esvue3 && npm run build:unpkgvue3 && npm run build:cjsvue3",
    "build:umdvue3": "rollup -c rollup.vue3.config.js --format umd --name mList --file dist/vue3/index.umd.js",
    "build:esvue3": "rollup -c rollup.vue3.config.js --format es --file dist/vue3/index.esm.js",
    "build:unpkgvue3": "rollup -c rollup.vue3.config.js --format iife --file dist/vue3/index.min.js",
    "build:cjsvue3": "rollup -c rollup.vue3.config.js --format cjs --file dist/vue3/index.cjs.js"
  },

打包后的文件

然后可以发布到npm

npm地址：hfex-list - npm (npmjs.com)

github地址：UzumakiHan/hfex-list: 下拉加载更多组件 (github.com)

到此这篇关于rollup打包vue组件并发布到npm的文章就介绍到这了,更多相关rollup打包vue组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

解决vue的过渡动画无法正常实现问题
今天小编就为大家分享一篇解决vue的过渡动画无法正常实现问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
探秘vue-rx 2.0(推荐)
这篇文章主要介绍了探秘vue-rx 2.0(推荐)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
el-popover如何通过js手动控制弹出框显示、隐藏
最近项目中多次用到了Popover弹出框,下面这篇文章主要给大家介绍了关于el-popover如何通过js手动控制弹出框显示、隐藏的相关资料,需要的朋友可以参考下
2023-12-12
vue3.0 Reactive数据更新页面没有刷新的问题
这篇文章主要介绍了vue3.0 Reactive数据更新页面没有刷新的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue 中使用 bimface详情
这篇文章主要介绍了vue 中使用 bimface详情,分别有安装 vue 脚手架、创建项目、引入 bimface 响应的文件、修改 App.vue 文件，实现页面渲染等步骤，需要的小伙伴可以参考一下
2021-12-12
vue2.0 根据状态值进行样式的改变展示方法
下面小编就为大家分享一篇vue2.0 根据状态值进行样式的改变展示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue3组件更新中的DOM diff算法示例详解
虚拟dom是当前前端最流行的两个框架（vue和react）都用到的一种技术,都说他能帮助vue和react提升渲染性能,提升用户体验,下面这篇文章主要给大家介绍了关于Vue3组件更新中的DOM diff算法的相关资料,需要的朋友可以参考下
2022-04-04
vite(vue3)配置内网ip访问的方法步骤
Vite是一个快速的构建工具,Vue3是一个流行的JavaScript框架,下面这篇文章主要给大家介绍了关于vite(vue3)配置内网ip访问的方法步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-05-05
vue实现卡片遮罩层交互式功能
在前端开发中,卡片遮罩层是一种常见的交互设计元素,用于强调某个区域或内容,并提供用户操作的入口,本文将带大家在 vue 中结合实际案例实现此功能,感兴趣的朋友一起看看吧
2024-08-08
vue简单练习桌面时钟的实现代码实例
这篇文章主要介绍了vue简单练习桌面时钟的实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值的相关资料,需要的朋友可以参考下
2019-09-09

rollup打包vue组件并发布到npm的方法

目录

基本的工程化插件

处理Vue文件

打包CSS插件

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具