rollup也是一个JavaScript模块化编译工具，可以帮助我们处理资源。与webpack和rollup相比，webpack的概念更简单，能处理的场景也更有限。资源类型处理方式应用场景webpack所有资源加载器，插件大型项目rollupES模块是主要的插件库文件命令行通过npminstallrollup-D先安装在项目中，也可以全局安装。在src文件夹下添加入口index.js文件，写好代码后使用命令行npxrollup./src/index.js-fiife-odist/bundle.js编译。-o表示输出目录-c表示使用默认文件-w表示--watch监控文件-f表示--format格式化方式，有四种cjs（commonjs的执行命令）iife（esmodule的执行命令，编译后的文件将代码放在闭包中）amd（amd模式下执行命令，编译后的文件由define定义）umd--namexxUtils（表示支持多环境，需要指定name为全局属性）编译后的内容文件的原样输出。配置文件的命令行可以直接使用。当处理规则较多时，需要定义很长的命令行。传递配置文件更方便。默认的配置文件是在rollup.config.js配置文件中使用input定义的Entry文件，output定义了编译文件的位置，可以定义多个，因为rollup主要支持esmodule，所以使用exportdefault来导出。导出默认值{输入：'./src/index.js'，输出：[{{格式：'umd'，名称：'iceUtils'，文件：'./dist/ice.umd.js'，}，{格式:'iife',名称:'iceUtils',文件:'./dist/ice.iife.js',},{格式:'cjs',文件:'./dist/ice.cjs',},{格式:'amd',文件:'./dist/ice.amd.js',},],};通过npxrollup-c，可以通过配置文件编译四个代码。支持commonjsrollup默认不支持commonjs，如果使用module.exports导出。//math.jsconstsum=(a,b)=>a+b;constmul=(a,b)=>a*b;module.exports={sum,mul,};//index.jsconst{sum,mul}=require('./math');控制台日志（总和（10、20））；console.log(mul(10,20));代码可以编译，但是html文件中引入了js文件，浏览器无法识别使用@rollup/plugin-commonjs可以解决这个问题importcommonjsfrom'@rollup/plugin-commonjs';exportdefault{输入：'./src/index.js'，输出：[{格式：'cjs'，文件：'./dist/ice.cjs.js'，导出：'auto'，}，]，插件：[commonjs()],};//index.js应该由esmodule导入{sum,mul}from'./math';如果引入第三方资源，比如lodash，需要使用@rollup/plugin-node-resolve来解析资源。这时候第三方资源会被打包到编译后的文件中，使得编译后的文件体积非常大，通过external属性排除打包，在html页面中引入资源地址。从'@rollup/plugin-commonjs'导入commonjs；从'@rollup/plugin-node-resolve'导入nodeResolve；导出默认{输入：'./src/index.js'，输出：[{格式：'umd',文件:'./dist/ice.umd.js',名称:'iceUtils',全局变量:{lodash:'_'},},],外部:['lodash'],插件:[commonjs(),nodeResolve()],};//index.html处理css和vue导入css资源直接编译会报错，告诉我们需要一个合适的plugincss来使用rollup-plugin-postcss来处理，如果项目中有vue文件，需要通过rollup-plugin-vue处理，rollup-plugin-replace定义了全局变量。从'rollup-plugin-vue'导入vue；从'rollup-plugin-replace'导入替换；插件：[vue(),replace({'process.env.NODE_ENV':JSON.stringify(process.env.NODE_ENV),}),]转换和压缩以上代码转换后与原写文件一致，没有转换和压缩，webpack中使用babel和terser工具，rollup中类似。importbabelfrom'@rollup/plugin-babel';import{terser}from'rollup-plugin-terser';plugins:[babel({babelHelpers:'bundled',}),terser(),]这样编译的资源被转码和压缩。本地服务通过rollup-plugin-serve启用。当资源文件发生变化时，rollup-plugin-livereload会实时刷新浏览器。从“rollup-plugin-serve”导入服务；从“rollup-plugin-livereload”导入livereload；插件：[serve({open:true,port:8000,contentBase:'',}),livereload(),],环境区分以上插件都是一个块写的。开发模式和生产模式没有区别。每次编译都会使用所有插件。我们可以通过参数来区分。//在package.json中定义命令“scripts”：{"build":"npxrollup-c--environmentNODE_ENV:production","serve":"rollup-c--environmentNODE_ENV:development-w"},//rollup.config.jsconstisProduction=process.env.NODE_ENV==='production';常量插件=[commonjs(),nodeResolve(),replace({'process.env.NODE_ENV':JSON.stringify(process.env.NODE_ENV),}),postcss(),vue(),];if(isProduction){constprodPlugin=[babel({babelHelpers:'bundled',}),terser(),];plugins.push(...prodPlugin);}else{constdevPlugin=[serve({open:true,port:8000,contentBase:'',}),livereload(),];plugins.push(...devPlugin);}这样编译在开发环境下，可以直接使用命令npmrunbuild，在生产模式下，可以使用npmrunserve来执行。总结Rollup主要用于处理esmodule的js资源，可以直接通过命令行执行。需要指定入口文件和出口文件，以及编译方式。默认不支持的资源处理需要通过plugin处理，自己通过commonjs导出的资源使用@rollup/plugin-commonjs，第三方库解析通过@rollup/plugin-node-resolve，处理css需要rollup-plugin-postcss,vueget依赖rollup-plugin-vue和rollup-plugin-replace，转换和压缩都离不开@rollup/plugin-babel和rollup-plugin-terser，最后通过`rollup-plugin-启动服务服务和rollup-plugin-livereload`。通过--environment配置参数区分环境。以上就是Rollup编译资源的介绍。更多关于前端和工程的内容可以参考我的其他博文，持续更新中~
