为了账号安全,请及时绑定邮箱和手机立即绑定

Rollup 基础知识(1)

标签:
Java

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


https://img1.sycdn.imooc.com//5d2d247200010dc501980214.jpg

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

https://img1.sycdn.imooc.com//5d2d24760001816a02700095.jpg

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

https://img1.sycdn.imooc.com//5d2d247c0001764203280158.jpg

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

https://img1.sycdn.imooc.com//5d2d24990001f5b605270075.jpg

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

https://img1.sycdn.imooc.com//5d2d249e000106dd03270174.jpg

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

https://img1.sycdn.imooc.com//5d2d24a300013d4203060159.jpg

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

https://img1.sycdn.imooc.com//5d2d24bc0001e07702070058.jpg

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

https://img1.sycdn.imooc.com//5d2d24c10001ab9303490389.jpg

我们打印一下 gen

在 build.js 中我们会用到 getAllBuilds 

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



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


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消