Rollup|Rollup 编译资源离不开 plugin Rollup编译资源离不开plugin

rollup 也是一个 JavaScript 的模块化编译工具，可以帮助我们处理资源。
与webpack比较
rollup相比 webpack 理念更为简单，能处理的场景也更有限。

	资源类型	处理方式	应用场景
webpack	所有资源	loader、plugin	大型项目
rollup	ES Module 为主	plugin	库文件

命令行
通过 npm install rollup -D 先安装到项目中，也可以全局安装。在 src 文件夹下增加入口 index.js 文件，编写代码后使用命令行 npx rollup ./src/index.js -f iife -o dist/bundle.js 编译。
-o 表示输出目录
-c 表示使用默认文件
-w 表示 --watch 监听文件
-f 表示 --format 格式化方式，有四种类型

cjs ( commonjs 的执行命令 )
iife ( esmodule 的执行命令，编译后文件会将代码放到闭包中 )
amd ( amd 方式的执行命令，编译后文件会通过 define 来定义 )
umd --name xxUtils ( 表示对多个环境支持，需要指定 name，作为全局的属性 )

编译后文件内容按原样输出

文章图片

配置文件
命令行可以直接使用，当处理规则较多时命令行需要定义很长，还是通过配置文件会更为方便，默认的配置文件为 rollup.config.js
配置文件中使用 input 定义入口文件，output 定义编译后文件位置，可定义多个，因为 rollup 主要支持 esmodule，所以使用 export default 的方式导出。

export default { input: './src/index.js', output: [ { format: 'umd', name: 'iceUtils', file: './dist/ice.umd.js', }, { format: 'iife', name: 'iceUtils', file: './dist/ice.iife.js', }, { format: 'cjs', file: './dist/ice.cjs.js', }, { format: 'amd', file: './dist/ice.amd.js', }, ], };

通过 npx rollup -c 即可通过配置文件编译出四份代码。
【Rollup|Rollup 编译资源离不开 plugin】

文章图片

支持 commonjs
rollup 中默认不支持 commonjs ，如果使用 module.exports 这种方式导出。

// math.js const sum = (a, b) => a + b; const mul = (a, b) => a * b; module.exports = { sum, mul, }; // index.js const { sum, mul } = require('./math'); console.log(sum(10, 20)); console.log(mul(10, 20));

代码可以通过编译，但将 js 文件引入到 html 文件中，浏览器将无法识别

文章图片

使用 @rollup/plugin-commonjs 可以解决这个问题

import commonjs from '@rollup/plugin-commonjs'; export default { input: './src/index.js', output: [ { format: 'cjs', file: './dist/ice.cjs.js', exports: 'auto', }, ], plugins: [commonjs()], }; // index.js 要通过 esmodule 的方式引入 import { sum, mul } from './math';

如果引入了第三方资源，如 lodash，要使用 @rollup/plugin-node-resolve 来对资源进行解析，此时第三方资源会被打包进编译后的文件，这样使得编译后文件的体积非常大，通过 external 属性排除打包，并在 html 页面引入资源地址。

import commonjs from '@rollup/plugin-commonjs'; import nodeResolve from '@rollup/plugin-node-resolve'; export default { input: './src/index.js', output: [ { format: 'umd', file: './dist/ice.umd.js', name: 'iceUtils', globals: { lodash: '_' }, }, ], external: ['lodash'], plugins: [commonjs(), nodeResolve()], }; // index.html

处理css和vue
将 css 资源引入直接编译会报错，告知我们需要合适的 plugin

文章图片

css 使用 rollup-plugin-postcss 来处理，如果项目中有 vue 文件，则需要通过 rollup-plugin-vue 来处理，rollup-plugin-replace 定义全局变量。

import vue from 'rollup-plugin-vue'; import replace from 'rollup-plugin-replace'; plugins: [ vue(), replace({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), }), ],

转换和压缩
以上代码转换后都与原编写文件一致，没有进行转换和压缩，在 webpack 中使用到的是 babel 和 terser 工具，在 rollup 中也类似。

import babel from '@rollup/plugin-babel'; import { terser } from 'rollup-plugin-terser'; plugins: [ babel({ babelHelpers: 'bundled', }), terser(), ],

这样编译后的资源就经过了代码转换和压缩

文章图片

本地服务
本地服务通过 rollup-plugin-serve 开启，当资源文件发生变化时，rollup-plugin-livereload 会实时刷新浏览器。

import serve from 'rollup-plugin-serve'; import livereload from 'rollup-plugin-livereload'; plugins: [ serve({ open: true, port: 8000, contentBase: '', }), livereload(), ],

文章图片

环境区分
上面的 plugin 都是写到一块的，没有区分开发模式或者生产模式，每次编译都会用到所有的插件，我们可以通过参数来做一个区分。

// 在 package.json 中定义指令 "scripts": { "build": "npx rollup -c --environment NODE_ENV:production", "serve": "rollup -c --environment NODE_ENV:development -w" },// rollup.config.js const isProduction = process.env.NODE_ENV === 'production'; const plugins = [ commonjs(), nodeResolve(), replace({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), }), postcss(), vue(), ]; if (isProduction) { const prodPlugin = [ babel({ babelHelpers: 'bundled', }), terser(), ]; plugins.push(...prodPlugin); } else { const devPlugin = [ serve({ open: true, port: 8000, contentBase: '', }), livereload(), ]; plugins.push(...devPlugin); }

这样编译开发环境就可以直接通过指令 npm run build，编译生产模式则用 npm run serve 来执行
总结
rollup 主要用于处理 esmodule 的 js 资源，通过命令行可以直接执行，需要指定入口出口文件，以及编译的方式。
默认不被支持的资源处理需要通过 plugin，自己通过 commonjs 导出的资源使用 @rollup/plugin-commonjs，第三方库解析通过 @rollup/plugin-node-resolve，处理 css 需要 rollup-plugin-postcss，vue 得依赖 rollup-plugin-vue 和 rollup-plugin-replace，转换和压缩离不开 @rollup/plugin-babel 和 rollup-plugin-terser，最后通过 `
rollup-plugin-serve 和 rollup-plugin-livereload` 开启服务。
区分环境通过 --environment 配置参数。
以上就是 Rollup 编译资源 的介绍，更多有关 前端、工程化 的内容可以参考我其它的博文，持续更新中~