本文转载自微信公众号《狗狗的前端世界》，作者西岭。转载本文请联系Gogo前端世界公众号。概述（Overview）Rollup是一个JavaScript模块打包器，可以将小块代码编译成大块复杂的代码。Rollup使用新的ESModule代码模块标准，而不是像CommonJS和AMD之前的社区模块化方案。现代浏览器已经原生实现了ES6模块。2020年，Vue的作者发布了Vite，被定义为下一代前端开发构建工具。目的是取代依赖于Webpack打包的各种构建工具。Vite的模块化工具使用Rollup。快速入门使用npminstall--globalrollup进行安装，并运行rollup--help查看可用的选项和参数。帮助信息中的提示：Usage:rollup[options]展示了Rollup的基本用法。我们准备三个文件index.js作为主入口文件，然后使用ES6模块化语法导入user.js和message.js文件，在mian.js中使用这两个文件导出的数据内容。//=======index.js=============importmsgfrom'./message'import{names}from'./user'console.log(names())console.log(msg)console.log('RollupTestCode')//========message.js============exportdefault{hi:'嘿'}//========user.js============exportconstnames=()=>{console.log('xiling')}exportconstages=()=>{console.log(666)}命令行终端执行：rollupindex.js$rollupindex.jsindex.js→stdout...varmsg={hi:'嘿'};constnames=()=>{console.log('xiling');};console.日志（名字（））；控制台日志（消息）；console.log('RollupTestCode');在命令终端中，我们可以看到打印出了最终打包好的编译代码。我们需要的是将小块的文件代码打包成一个大文件。实现效果只需要在命令中加入指定命令参数：rollupindex.js--filebundle.js，生成bundle.js文件，代码如下：varmsg={hi:'嘿'};constnames=()=>{console.log('xiling');};console.log(names());console.log(msg);console.log('RollupTestCode');我们看到打包后的代码非常简洁，就是把需要一起运行的代码按顺序组装起来。请注意，只会保留使用过的代码。这就是Rollup最先提出的Tree-shaking特性，后来几乎所有的打包工具都引入了这个特性。什么是摇树？基本原理非常简单。在打包过程中，Rollup对代码中的导入进行静态分析，只引入最基本精简的代码，排除掉没有用到的代码。因此，您可以生成轻量级、快速且复杂度低的库和应用程序。配置文件我们一般在命令行使用Rollup。您还可以提供一个配置文件（可选）来简化命令行操作，同时仍然启用Rollup的高级功能。配置文件是一个ES6模块，暴露了一个包含Rollup需要的一些选项的对象。通常，我们称这个配置文件为rollup.config.js，它通常位于项目的根目录下。注意：Rollup本身会处理配置文件，所以你可以使用exportdefault语法——代码不会被Babel或类似工具编译，所以你只能使用你正在使用的Node.js版本支持的ES2015语法。配置选项列表：https://www.rollupjs.com/guide/big-list-of-options//rollup.config.jsexportdefault{//包的入口点（例如：你的main.js或index.js)input:'index.js',//导出配置output:{file:'budle.js',//packagetothatfileformat:'esm'//generatedpackageformat}}input:input[string]:'index.js'此包的入口点（例如：您的main.js或app.js或index.js）输出：output[object]:{}output.file[string]:'bundle.js'写文档。也可用于生成源地图，如果适用output.format[string]：生成包的'iife'格式。包格式选项可以是以下任何一种：amd-异步模块定义，用于模块加载器，如RequireJScjs-CommonJS，用于Node和Browserify/Webpackesm-将包保存为ES模块文件，在现代浏览器中可以通过
