什么是Rollup？前端项目工程构建工具也发展了几年，生态进化也逐渐开发出很多构建项目的好工具。从一开始的grunt，从gulp到webpack，前端工程化越来越方便，给前端带来了一个美好的时代。目前，rollup是社区流行的构建工具。使用rollup打包模块化的JavaScript代码非常方便。它使用ES6中新的语法标准，将模块化的代码打包，将代码拆分成多个模块化的小代码片段，非常适合JavaScript类库、插件、应用程序的开发。另一个好处（TreeShaking）是rollup可以按需打包代码，系统引入但未使用的代码不会打包到最终文件中。rollup快速入门：官网、GitHub快速入门开始之前需要做一些准备工作：安装nodejs和npm（也可以使用yarn）理解ES6中模块的概念熟练使用命令行工具熟悉gulp、webpack（不熟悉也没关系））首先需要在全局空间安装rollup：npminstall--globalrollup（或者使用简写：npmi-grollup）全局安装rollup后，可以使用配置文件的命令行界面或者使用JavaScriptAPI接口打包JavaScript代码。使用命令行假设你要打包的入口文件是main.js，你想把main.js中引入的所有文件都打包到bundle.js中。Rollup提供了多种打包方式。可以通过format属性设置要打包的代码类型：amd——输出为AMD模块规则，RequireJS可以使用cjs——CommonJS规则，适用于Node、Browserify、Webpack等。es——默认值，无需更改codeiife-输出自执行功能，最适合在html中导入脚本标签，代码更小umd-通用模式，amd,cjs,iife可以根据使用场景使用不同的格式属性来打包文件。Browseruse:#编译成自执行函数，直接导入html中的script标签即可$rollupmain.js--formatiife--outputbundle.jsNodejsuse:#CompileintoCommonJSmodule$rollupmain.js--formatcjs--outputbundle.js是浏览器和Nodejs通用的：#UMD模式需要设置大注册$rollupmain.js--formatumd--name"myBundle"--outputbundle.js使用configurationfilestorollup在开始项目之前，先在本地创建一个项目，在根目录下通过npminit创建一个package.json文件，构建一个使用npm管理依赖的项目。将rollup安装到项目本地：npmi--save-devrollup//--save-dev表示将rollup安装到开发环境依赖中，并创建rollup.config.js在根目录下创建rollup配置文件项目，如下：//rollup.config.jsexportdefault{entry:'src/main.js',//包入口文件格式：'iife',//iife模式，适合浏览器sourceMap:true,//enablesourcemapdest:'dist/bundle.js'//相当于--output，打包目标文件};创建文件src/main.js，写入入口文件，在文件中使用ES6中的类语法。//src/main.jsclassCustomer{constructor(name){this.name=name;}sayHi(){console.log(`Thenameis:${this.name}`)console.info(`foo'sUppercase:${_.upperCase('foo')}`)}}letkevin=newCustomer('凯文');凯文.sayHi();configurescriptsofpackage.json{"scripts":{"build":"rollup-c"//-c参数全称--config，表示使用配置文件}}自定义使用build命令rollup配置文件上面：rollup-c会默认使用项目根目录下的rollup.config.js作为项目的rollup配置文件。如果要自定义使用其他文件作为配置文件，可以通过参数指定文件。尤其适用于为一个应用系统配置多个不同环境的配置文件。如下，分别使用开发环境和生产环境的两套配置文件来配置项目。rollup--configrollup.config.dev.jsrollup--configrollup.config.prod.js//或者，使用简写rollup-crollup.config.dev.jsrollup-crollup.config.prod.jsbuild项目配置以上内容，就可以开始打包src/main.js了。在命令行中，在项目根目录下，执行命令：npmrunbuild执行后，会看到在项目根目录下生成了一个新目录：dist。dist目录下有两个文件，分别是打包后的js文件：bundle.js和bundle.js对应的map文件：bundle.js.map。打开bundle.js文件，看到如下代码：${this.name}`);}}letkevin=newCustomer('kevin');kevin.sayHi();}());//#sourceMappingURL=bundle.js.map可以看到，rollup将我们的src/main.js被打包成一个新的js文件，上面放了一个自执行函数，文件末尾有对应的map文件映射语句。添加babel上一步可以看到rollup已经把代码打包好了。但是我们在main.js中使用了ES6语法，打包后还是ES6语法。由于现在的浏览器并不能很好的兼容ES6中的语法，所以如果我们想要我们的代码完美的在浏览器中运行，就需要使用babel将ES6语法转换成ES5语法。为了创建大型应用和扩展第三方插件，rollup提供了对第三方插件的支持，在配置文件中添加plugins实现插件的引入。添加babel需要引入插件rollup-plugin-babel，使用npm安装：npmi-Drollup-plugin-babel--save-dev除了babel插件，还需要安装ES6语法插件babel-preset-es2015-rollup:npmi-Dbabel-preset-es2015-rollup--save-dev在项目根目录下创建babe配置文件.babelrc://。babelrc{"presets":[["latest",{"es2015":{"modules":false}}]],"plugins":["external-helpers"]}准备好以上内容后，检查最后一步并引入babel转换器。修改rollup的配置文件如下：importbabelfrom'rollup-plugin-babel';exportdefault{entry:'src/main.js',format:'iife',dest:'dist/bundle.js',sourceMap:true,plugins:[babel({exclude:'node_modules/**'})]}修改好配置文件之后，执行一次npmrunbuild，再重新查看dist/bundle.js：(function(){'usestrict';varclassCallCheck=function(instance,Constructor){if(!(instanceofConstructor)){thrownewTypeError("不能将类作为函数调用");}};varcreateClass=function(){functiondefineProperties(target,props){for(vari=0;i
