使用rollup打包一个vue工具库_rollup build_乐悠刘LL的博客-程序员秘密

什么是rollup

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
rollup相对于webpack来说，会更加的轻量，Rollup偏向应用于js库，webpack偏向应用于前端工程，UI库；如果你的应用场景中只是js代码，希望做ES转换，模块解析，可以使用Rollup。如果你的场景中涉及到css、html，涉及到复杂的代码拆分合并，建议使用webpack。

打包一个指令库

在这里插入图片描述

这里我有一个指令库文件夹，我想打包此指令库

环境准备

1. 安装依赖

npm i rollup rollup-plugin-node-resolve  rollup-plugin-vue @rollup/plugin-image -D

如果你项目中的vue版本是2.x，需要降rollup-plugin-vue的版本降成^5.1.9

rollup-plugin-node-resolve 插件告诉 Rollup 如何搜寻外部依赖
rollup-plugin-vue 打包vue文件
@rollup/plugin-image处理文件中的图片资源

2. 添加配置文件rollup.config.js

import vue from 'rollup-plugin-vue';
import resolve from 'rollup-plugin-node-resolve';
import image from '@rollup/plugin-image';

export default {
    input: 'src/directives/index.js',
    output: [
        {
            file: 'dist/index.esm.js',
            format: 'es'
        }
    ],
    external: ['vue'],
    plugins: [
        vue(),
        resolve(),
        image()
    ]
}

input 入口文件
output输出文件，这里我们将输出文件的格式指令为es6格式
external不需要再额外打包，直接引入node_modules里的vue即可
plugins一些额外的插件

如果这里我不加external：[‘vue’]
在这里插入图片描述
加了external：[‘vue’]

可以看到加了之后vue没有被打包进去，大大的减少了代码大小

3. package.json添加script

    "rollupbuild": "rollup --config"

4. 运行命令

npm run rollupbuild

5. 结果展示

在这里插入图片描述

可以看到打包出来的文件也是非常的清晰，利于我们使用。

本文链接：https://blog.csdn.net/liusixsixsix/article/details/108344467

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

iOS开发之静态库—— 图片、界面xib等资源文件封装到.a静态库_Z苗的博客-程序员秘密

公司的一个项目，需要做成一个.a静态库供别人调用，但是静态库中引用到了图片和xib1.打开Xcode，点击File\New\Project，选择iOS\Framework and Library\Cocoa Touch Static Library新建一个静态库工程.2.导入你的项目（包括项目里面所有的功能类和资源文件）1》对于图片，建议不要把存放图片的Assets.xcassets文件直...

Maven 跨项目调用persistence.xml动态配置文件_龙泽路飞的博客-程序员秘密

1.场景由于业务原因，需要把common项目中的persistence.xml移至database项目中，并且persistence.xml的部分变量是调用了父项目的父级pom.xml的参数。 2.项目结构新建了3个项目来演示。 -sop：maven父项目，负责连接所有子项目（子模块），含父级pom.xml。 -sop-common：子项目，包含实体...

知识体系、算法题、教程、面经，这是一份超赞的AI资源列表_Python大本营的博客-程序员秘密

整理 | 夕颜出品 | AI科技大本营（ID:rgznai100）导读：近日，有人在 GitHub 上开源了一个名为“Awesome Interview”的技术面试集锦，...

Label Propagation Algorithm LPA 标签传播算法解析及matlab代码实现_adhcsqz153654445的博客-程序员秘密

转载请注明出处：http://www.cnblogs.com/bethansy/p/6953625.htmlLPA算法的思路：首先每个节点有一个自己特有的标签，节点会选择自己邻居中出现次数最多的标签，如果每个标签出现次数一样多，那么就随机选择一个标签替换自己原始的标签，如此往复，直到每个节点标签不再发生变化，那么持有相同标签的节点就归为一个社区。算法优点：思路简...

C++11多线程（六）：std::unique_lock类的用法_令狐掌门的博客-程序员秘密

unique_lock是个类模板，工作中，一般lock_guard(推荐使用), lock_guard取代了mutex的lock()和unlock(); unique_lock比lock_guard灵活很多，可以手动控mutex解锁，效率率上差一点，内存占用多一点。还是使用上一篇的代码，处理A线程抛异常无法解锁的情况。下面使用unique_lock来解决，代码...

FIR和IIR的区别_超级张大侠的博客-程序员秘密

FIR：有限脉冲响应滤波器。有限说明其脉冲响应是有限的。与IIR相比，FIR具有线性相位、容易设计的优点。这也就说明，IIR滤波器具有相位不线性，不容易设计的缺点。而另一方面，FIR却拥有IIR所不具有的缺点，那就是设计同样参数的滤波器，FIR比IIR需要更多的参数。这也就说明，要增加DSP的计算量。DSP需要更多的计算时间，对DSP的实时性有影响。以下都是低通滤波器的设计。FIR（有限脉冲...

随便推点

20135337朱荟潼 Linux第五周学习总结——扒开系统调用的三层皮（下）_weixin_34272308的博客-程序员秘密

朱荟潼 + 原创作品转载请注明出处 + 《Linux内核分析》MOOC课http://mooc.study.163.com/course/USTC 1000029000一、学习内容（一）给MenuOS增加time和time-asm命令（详见：二、实验内容）四步 1.更新menu代码到最新版； 2.在main函数中增加MenuConfig； 3.增加对应的Time函...

hadoop客户端远程调用yarnwindow和Linux版本安装_hadoop的yarn客户端_ly8951677的博客-程序员秘密

文章目录window（个人已经验证成功）1、下载1.1、 hadoop（apache）1.2、 winutils.exe和hadoop.dll下载2、安装2.1、下载好了压缩包，只需要把对应版本的 winutils.exe和hadoop.dll移到自己下载的hadoop路径的bin目录下即可，正常的话就是完成了。2.2、在系统环境变量里面的系统设置，添加HADOOP_HOME，路径是你解压hadoop-2.6.0.tar.gz的路径2.3、再在系统环境配置里面找到Path进行添加bin和sbin路