首页 » 简单使用Rollup模块打包工具

简单使用Rollup模块打包工具

根据Rollup官方文档的介绍:Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。

Rollup和webpack那种偏向于应用打包不同,Rollup更专注于类库打包,像vue,react都是通过rollup打包的

注意:webpack支持HMR(热模块更新),而Rollup并不支持,因此在应用打包的时候还是选择webpack比较好,但是如果只是打包类库之类的,并且还是基于ES6模块开发的,那么就可以考虑选择rollup了,因为rollup在Tree-shaking和ES6模块有着算法优势。因为Rollup对模块化是使用新标准,例如 CommonJS,而不是老旧解决方案

提示:webpack已经支持Tree-shaking,并且在babel-loader的情况下也支持es6 module的打包

Rollup是ESM模块标准构建打包工具,源必须使用ESM模块标准,如果需要使用其他标准可通过插件完成

安装rollup

npm install rollup

查看帮助文档

rollup --help

打包使用

rollup -i index.js

默认输出到终端

指定输出到哪个文件

 rollup -i index.js --file dist.js

还可以指定输出模块标准是哪个

 rollup -i index.js --file dist.js --format umd

 rollup -i index.js --file dist.js --format cjs

 rollup -i index.js --file dist.js --format iife

打包

rollup src/demo.js -f cjs -o dist/bundle.js

注意:-f是--format的缩写,表示生成代码的格式,例如amd,cjs,es,umd,iife

使用UMD格式需要指明一个name属性,用来挂载模块到全局环境中

rollup src/demo.js -f umd -o dist/bundle.js --name hallo

在global下声明一个名为hallo的对象,用来挂载全部的export模块

一次打包多个文件

rollup -i index.js -i main.js --dir dist --format cjs

如果想监听文件是否改动,可以使用-w参数(--watch),当文件发生改动的时候,重新打包

配置文件(rollup.config.js)

export default {
    input: ["./src/demo.js"],
    output: {
        file: "./dist/bundle.js",
        format: "cjs",
        name: "experience",
    },
}

如果配置文件想使用module.exports = {}的方式,需要将配置文件修改为.cjs文件

执行命令

rollup -c rollup.config.js

或者

rollup --config rollup.config.js

打包阶段传递环境变量

rollup.config.js获取设置的变量
console.log(process.env.DEV)

执行时设置环境变量
rollup -c rollup.config.js --environment DEV:1

这个可以通过环境变量的不同,来做不同的处理,而不需要写多套config配置了

Rollup的Tree-shaking功能,只对使用的模块进行打包,对于没有使用的模块是不进行打包的


Rollup常用插件(vite使用Rollup作为打包工具,因此vite也可以使用Rollup插件)

@rollup/plugin-json,打包json文件成js代码

安装

yarn add @rollup/plugin-json

使用

yarn rollup -c rollup.config.js --plugin json

如果不想在命令行设置要使用的插件,也可以在rollup.config.js下设置

import json form rollup/plugin-json
export default {
    input: ["./src/demo.js"],
    output: {
        file: "./dist/bundle.js",
        format: "cjs",
        name: "experience",
        plugins: [],
        banner: '/**hallo word**/',
    },
    externals: [
        'react'
    ]
    plugins:[
        json(),
    ]
}

可以看到Rollup插件是函数,并且是顺序执行插件

externals可以指定不打包的模块

banner是指定打包完成文件头部的注释,会和rollup-plugin-terser插件冲突,代码压缩会删除全部注释

也可以通过设置npm script脚本来简化命令

'scripts':{
    'build': 'rollup -c rollup.config.js'
}

执行npm run build或者yarn build都可以执行

@rollup/plugin-babel,将es6文件转换为es5文件

@rollup/plugin-alias,设置模块别名,不需要写很长很长的路径,例如:

plugins: [
    alias({
        entries: [
            { find: 'main', replacement: '../src/main' },
            { find: 'test', replacement: './test' }
        ]
    })
]

index.js

import main from 'main'
import test from 'test'

@rollup/plugin-commonjs,让其支持CommonJS模块标准打包

@rollup/plugin-vue,打包.vue文件,vue2和vue3使用的插件版本不同,vue3使用的是@rollup/plugin-vue6.0.0版本以上,而vue2使用@rollup/plugin-vue5.1.9版本,而且还需要搭配vue编译器使用,vue3使用@vue/compiler-sfc,vue2使用vue-template-compiler

@rollup/plugin-node-resolve,允许打包第三方模块,这个插件需要搭配@rollup/plugin-commonjs使用,因为这个插件底层实现是使用了CommonJS模块标准

@rollup/plugin-typescript,增加typescript支持,TypeScript版本要求3.7以及以上

@rollup/plugin-image,支持图片加载依赖,图片会被编码为base64格式(体积会增加)

rollup-plugin-terser,代码压缩插件,应该在打包完成后执行该插件,因此应该在output内部的plugins设置,老插件,这个插件没有设置default,import使用时需要{terser}

@rollup/plugin-postcss,让其支持使用postcss以及postcss插件

@rollup/plugin-serve,启动本地服务器

@rollup/plugin-livereload,文件发生变化,进行实时刷新

@rollup/plugin-eslint,打包时校验语法是否符合规范

@rollup/plugin-copy,打包时删除debugger语句和函数,例如console.log

@rollup/plugin-visualizer,加载WebAssembly模块

添加新评论

已有 2 条评论

  1. 你的网站最近加载莫名有点慢了,不知道咋回事

    1. 那是因为我换服务器了,用的不是腾讯轻量(不换不行,再不换没钱维护了,换了个年付的机子)