继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Rollup 基础知识(1)

幕布斯6054654
关注TA
已关注
手记 1135
粉丝 218
获赞 1009

以前一直以来都在用 wepack 打包自己项目, 但是为了了解 vue 打包原理,今天我们来简单地看一下 rollup 是如何打包项目。我们先创建一个项目然后创建一个 main.js 作为我们应用主文件,我们主文件依赖 a.js 。


https://img3.mukewang.com/5d2d247200010dc501980214.jpg

然后我们引入 a.js 的 show 的方法。

https://img3.mukewang.com/5d2d24760001816a02700095.jpg

在 a.js 文件中我们定义一个方法 show 然后将这个方法以对象的属性形式暴露给其他 js 使用,这里我们使用 ES6 模块实现管理我们应用。

https://img1.mukewang.com/5d2d247c0001764203280158.jpg

在运行之前我们需要全局安装一下 rollup ,

https://img.mukewang.com/5d2d24990001f5b605270075.jpg

输出的文件就是这个样子,好了我们通过简单 demo 来用 rollup 打包一下我们项目。

https://img1.mukewang.com/5d2d249e000106dd03270174.jpg

我们也可以写一个配置文件 config 让我们 rollup 读取我们的配置文件来打包我们的 main.js 生成 bundle.js。

https://img4.mukewang.com/5d2d24a300013d4203060159.jpg

然后我们就 通过--config 参数读取配置的文件来打包我们的应用文件。

https://img2.mukewang.com/5d2d24bc0001e07702070058.jpg

接下来我们看一看 vue 的构建过程

https://img4.mukewang.com/5d2d24c10001ab9303490389.jpg

我们打印一下 gen

在 build.js 中我们会用到 getAllBuilds 

这个方法是生产 config 配置文件的函数,其实genConfig 就是返回一个配置对象 rollup 会读取配置对象来进行构建我们项目。



作者:zidea
链接:https://www.jianshu.com/p/1ba9b43dd60c


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP