html打包程序源码,Rollup打包工具的使用(超详细,超基础,附代码截图超简单)...

rollup(下一代ES模块捆绑器)是什么请查看官网介绍http://rollupjs.org/guide/en/javascript

注意不要看Rollup.js 中文网,由于这是别人翻译的,不是实时更新的,我以前看这个总是安装出错css

以前在网络上查找过相关的rollup使用,有些文章很概念不易理解,没有具体步骤;有些文章步骤不够详细,没有前因后果。因此打算整理个文章给后来者减小弯路。我保证此文真的是手把手教学,很接地气,由于我是边建工程边使用边写文章,不是某个项目里的代码,因此代码清晰,没有冗余。html

为何不用webpack

一说到打包工具你们都想到webpack,由于咱们用到的vue,react脚手架都是基于webpack的,他有各类loader,帮助咱们解决各类问题,这针对于开发项目是颇有效的,可是他生成代码有不少是非咱们所写的逻辑代码, 好比一些他自有的模块加载功能:vue

dc67b9cf6b251f8f51e695711af6651c.png

若是你要开发js库,那webpack的繁琐和打包后的文件体积就不太适用了。有需求就有工具,因此rollup的产生就是针对开发js库的。java

rollup生成代码只是把咱们的代码转码成目标js并没有其余,同时若是须要,他能够同时帮咱们生成支持umd/commonjs/es的js代码,vue/react/angular都在用他做为打包工具。查看他们的官网代码均可以看到rollup的影子。node

快速入门

1.新建工程

新建一个空文件夹,好比rollupConfigDemoreact

2.安装rollup

用vscode打开这个工程,执行命令安装webpack

cnpm install rollup --save-dev

复制代码

b8ce3c8a245ec472ce827d4751a45d88.png

执行后咱们发现项目自动生产了一些文件,并看到package包里有了rollup。git

添加gitignore,忽略不用上传的文件

21ca9d97a8f0874710c8905d9efa0162.png

3.建立rollup.config.js

咱们也能够不用配置文件直接用cli命令来打包,可是若是添加更多的选项,这种命令行的方式就显得麻烦。为此,咱们能够建立配置文件来囊括所需的选项。配置文件由 JavaScript 写成,比 CLI 更加灵活。(cli命令打包请看官网介绍)es6

f23c1b566932aea0cbb15d35eea330f9.png

4.编写要打包的文件

1.新建src文件夹,并新建main.js(应用程序入口)

de358542b397b551f00505678f35f18e.png

2.新建modules文件夹(表明模块文件)

modules的做用的区分模块和主入口,modules中可根据你本身的js库设计文件目录结构。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值