首页 » 简单使用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

npm install rollup -g

打包

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

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

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

配置文件(rollup.config.js)

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

执行命令

rollup -c


Rollup常用插件

@rollup/plugin-babel

@rollup/plugin-json

@rollup/plugin-alias

@rollup/plugin-commonjs

@rollup/plugin-node-resolve

@rollup/plugin-typescript

@rollup/plugin-image

rollup-plugin-terser

rollup-plugin-postcss

rollup-plugin-serve

rollup-plugin-livereload

rollup-plugin-copy

rollup-plugin-visualizer

添加新评论

已有 2 条评论

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

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