快速学习 rollup 打包

1、rollup是什么

JavaScript的ES模块打包器

从一个入口文件开始，将所有使用到的模块文件都打包到一个最终的发布文件中

2、与webpack的差异

定位不同：webpack偏向于应用打包；rollup更专注于JavaScript类库打包

(1)如果你需要代码拆分(Code Splitting)，或者你有很多静态资源需要处理，再或者你构建的项目需要引入很多CommonJS模块的依赖，那么 webpack 是个很不错的选择;

(2)如果您的代码库是基于 ES2015 模块的，而且希望你写的代码能够被其他人直接使用，你需要的打包工具可能是 Rollup;

3、rollup的重要特性

(1)它使用ES6的模块标准，这意味着你可以直接使用import和export而不需要引入babel（当然，在现在的项目中，babel可以说是必用的工具了）。

(2)Rollup.js一个重要特性叫做'tree-shaking'，这个特性可以帮助你将无用代码（即没有使用到的代码）从最终的生成文件中删去。（这个特性是基于ES6模块的静态分析的，也就是说，只有export而没有import的变量是不会被打包到最终代码中的）

快速开始

npm install rollup -D

然后在本地创建一个项目：

mkdir -p my-project
cd my-project

其次我们创建一个入口文件，使用 lodash 测试代码写个简单的 demo：

import after from 'lodash/after'var saves = ['profile', 'settings'];var done = after(saves.length, function() {console.log('done saving!');
});done()
done()

基本代码准备好了之后，我们写 rollup 的配置文件 (rollup.config.js 在根目录下)：

export default {input:'src/main.js',output:{file:'dist/bundle.cjs.js',//输出文件的路径和名称format:'cjs',//五种输出格式：amd/es6/iife/umd/cjsname:'bundleName'//当format为iife和umd时必须提供，将作为全局变量挂在window下}
}

package.json 添加一条运行的命令：

{"scripts": {"build": "rollup --config"},
}

这样在根目录下就生成了一个bundle.cjs.js，就是我们想要的打包后的文件。

快速学习 rollup 打包相关推荐

Vue 是如何用 Rollup 打包的？
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
如何使用rollup打包前端组件/库
如何使用rollup打包前端组件/库目前主流的前端框架vue和react都采用rollup来打包,为了探索rollup的奥妙,接下来就让我们一步步来探索,并基于rollup搭建一个库打包脚手架,来发 ...
vue中集合取第一个_快速学习Vue框架（知识点集合）
学习Vue的小伙伴速度看过来,快速学习Vue框架知识点集合贴来啦.建议收藏,尤其基础并不是很扎实的同学,本篇集合贴就是你日后工作的参考手册. 基础知识: ·vue的生命周期:beforeCreate/ ...
rollup打包原理以及实现rollup
前言上一篇文章已对rollup具体使用做了详细的介绍,这篇文章学习下rollup原理.由于篇幅有限,拉取了rollup最初版本的代码(0.3.0版本).我的目的是学习 rollup 怎么打包的,怎么 ...
Rollup 打包并发布到 npm
前言其实用 webpack 也可以打包库,不过根据create-react-app项目贡献者的说法:rollup适合发布 js 库,而webpack更适合做应用程序.简而言之就是:rollup 打包 ...
业余快速学习虚幻引擎教程
仅用5小时学会虚幻引擎! 你会学到什么专为希望在业余时间打造虚幻引擎技能的艺术家和开发人员量身定制的专业技术从几何图形到材料,从照明到互动,所有方面的提示探索如何创造建筑水的效果如何使用顶点绘 ...
零基础快速学习Java技术的方法整理
在学习java技术这条道路上,有很多都是零基础学员,他们对于java的学习有着很多的不解,不知怎么学习也不知道如何下手,其实Java编程涉及到的知识点还是非常多的,我们需要制定java学习路线图这样才 ...
怎样快速学习html5,如何快速学习HTML5?带你了解HTML5学什么?
今天小编要为大家分享的文章是关于如何快速学习HTML5?HTML5主要学些什么的文章.近年来前端开发非常热门,前端开发工程师也很稀缺,于是很多人将其视为高薪行业的代名词.HTML5前端开发工程师被称作 ...
新手搭ssm要多久_如何快速学习ssm 框架？
要快速学习SSM框架,你需要一套学习曲线平滑的教程 1. 很快可以看到效果 SSM框架这种教程的,在百度或者git上一搜一大把,不过很遗憾,大部分你照着上面的流程做,是做不出来的,要么缺少包,要么配置 ...

快速学习 rollup 打包

快速开始

快速学习 rollup 打包相关推荐

最新文章

热门文章