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

 更新时间:2023年05月25日 11:57:40   作者:UzumakiHan  
这篇文章主要介绍了rollup打包vue组件并发布到npm,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

个人认为rollup在打包组件的实现方式比用webpack方便,webpack应该是比较适合打包大型的工程项目,而rollup适合打包一些平时在项目中的组件

rollup中文文档:简介 | rollup.js 中文文档 | rollup.js中文网 (rollupjs.com)

这次打包一个滚动加载更多的组件,因为平时用vant是vant-list 会遇到一些问题,例如滚动到底部没有触发加载更多逻辑。

首先在项目根目录安装rollup

npm i rollup -D

安装一些rollup常用到的plugins

基本的工程化插件

  • @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组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • php+vue3实现点选验证码功能

    php+vue3实现点选验证码功能

    这篇文章主要介绍了php+vue3实现点选验证码,本文通过实例代码给大家介绍的详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • vue的指令和插值问题汇总

    vue的指令和插值问题汇总

    Vue 是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合,这篇文章主要介绍了vue的指令和插值总结,需要的朋友可以参考下
    2022-10-10
  • elementUI动态嵌套el-form表单校验举例详解

    elementUI动态嵌套el-form表单校验举例详解

    最近工作遇到个需求,表单可以进行增加删除操作,需要进行表单校验,这篇文章主要给大家介绍了关于elementUI动态嵌套el-form表单校验的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • 解读Vue-Router 使用 prams 路由传参失效

    解读Vue-Router 使用 prams 路由传参失效

    这篇文章主要介绍了Vue-Router使用prams路由传参失效,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • Vue Autocomplete 自动完成功能简单示例

    Vue Autocomplete 自动完成功能简单示例

    这篇文章主要介绍了Vue Autocomplete 自动完成功能,结合简单示例形式分析了Vue使用el-autocomplete组件实现自动完成功能相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • Vue SPA首屏加载缓慢问题解决方案

    Vue SPA首屏加载缓慢问题解决方案

    这篇文章主要介绍了Vue SPA首屏加载缓慢问题解决方案,首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容
    2023-03-03
  • vant-list上拉加载onload事件触发多次问题及解决

    vant-list上拉加载onload事件触发多次问题及解决

    这篇文章主要介绍了vant-list上拉加载onload事件触发多次问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue中静态文件引用的注意事项及说明

    vue中静态文件引用的注意事项及说明

    这篇文章主要介绍了vue中静态文件引用的注意事项及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • 从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法

    从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法

    今天小编就为大家分享一篇从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue详细的入门笔记

    Vue详细的入门笔记

    这篇文章主要介绍了Vue详细的入门笔记,对Vue感兴趣的同学,可以参考下
    2021-05-05

最新评论