公司网站系统,江门住房城乡建设厅网站,微信小程序第三方开发,中建装饰集团有限公司官网最近在看vue3相关的知识的时候#xff0c;发现了一个新的打包工具#xff0c;至少于我而言是新鲜的。它就是rollup.js。一说到JS打包、合并、压缩、模块处理等都会想到webpack#xff0c;这是王者#xff0c;当然入门的难度偏高。而vue3中搭配的vite运行速度确实非常快发现了一个新的打包工具至少于我而言是新鲜的。它就是rollup.js。一说到JS打包、合并、压缩、模块处理等都会想到webpack这是王者当然入门的难度偏高。而vue3中搭配的vite运行速度确实非常快里边有很多的rollup.js相关的回调函数。而我们今天就来简单的看看rollup.js打包神器。官网地址为Rollup | Rollup
简介
Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.
Rollup是一个用于JavaScript的模块打包器它将多数小块代码编译成更大、连续的代码。因为浏览器是需要有一个整体脚本代码文件才能够运行的对于一个集合的项目、产品浏览器没有相关的合并功能。
浏览器需要脚本打包主要原因有三个。
1早期的浏览器不支持模块大型网页项目只能先合并成单一脚本再执行。
2Node.js 的模块机制与浏览器不兼容必须通过打包工具进行兼容处理。
3浏览器加载一个大脚本要比加载多个小脚本性能更好。
安装
npm install --global rollup
这样安装可以让 Rollup 成为全局可用的命令行你也可以仅将其安装于本地
npm install rollup --save-dev
也可以不安装直接使用就是把下面所有命令中的rollup替换成npx rollup参见《npx 使用教程》。
第一次使用可以运行下面的命令查看一下帮助。
$ rollup --help
# 或者
$ npx rollup --help 配置rollup.config.js文件
Rollup 使用一个 rollup.config.js 文件进行配置。
// rollup.config.js
export default {input: src/index.js,output: {file: dist/bundle.js,format: umd}
};
配置跟其他工具基本一致从入口文件 index.js 打包后输出文件 bundle.js。format 是生成包的格式可选有 amd,cjs,es,iife,umdumd 是通用模块定义打包后可以通过 script 标签引入也可以通过 import 等方式引入作为一个 JS 库要适用各个场景应选择 umd 。
babel
Rollup 通过插件在打包的关键过程中更改行为babel的插件就是 rollup-plugin-babel需要先安装相关依赖
npm i rollup-plugin-babellatest babel/core babel/preset-env -D
新建 .babelrc 文件配置 babel
{presets: [babel/preset-env]
} 代码压缩
npm i rollup-plugin-uglify -D
因为 rollup-plugin-uglify 无法压缩 ES6 的语法所以必须先用 babel 转。如果想直接压缩 ES6 的语法可换成 rollup-plugin-terser ESLint
规范代码书写规则。
npm i rollup-plugin-eslint -D
然后初始化生成一个 ESLint 配置文件 ./node_modules/.bin/eslint --init
那么最终的 rollup.config.js 配置文件如下
import babel from rollup-plugin-babel;
import { uglify } from rollup-plugin-uglify;
import { eslint } from rollup-plugin-eslint;
export default {input: ./index.js,output: {file: dist/bundle.js,name: People,format: umd},plugins: [eslint({fix: true,exclude: node_modules/**}),babel({exclude: node_modules/**}),uglify()]
};
例子
下面就用 rollup.js 打包两个简单的脚本库文件 a.js 和入口脚本 main.js。
// a.js
const PI 3.1415;
const E 12.718;export function aPi(x) {return 2*x PI;
}export function aE(x) {return 2*x E;
}
// main.js
import { aPi } from ./a.js;console.log(aPi(102));
$ rollup main.js
打包时只需给出入口脚本 main.jsrollup 会自动把依赖项打包进去。
打包结果默认输出到屏幕。
打包结果如下所示
const PI 3.14;function aPi(x) {return x PI;
}console.log(aPi(10));
使用参数--file [FILENAME]将打包结果保存到指定文件。
$ rollup main.js --file bundle.js
打包结果会根据引用来进行打包把没有用到的方法、代码剔除从而使代码更加简洁。 转成 CommonJS 模块
rollup 还支持 ES 模块转成 CommonJS 模块使用参数--format cjs就可以了。
$ rollup add.js --format cjs
当然rolljs的功能还有很多比如如何添加typescript如何开发插件摸索一下就可以了。基本上来说不会特别复杂。
借鉴文章
打包工具 rollup.js 入门教程 - 阮一峰的网络日志
简介 | rollup.js 中文文档 | rollup.js中文网
Rollup.js: 开源JS库的打包利器_南乔几经秋的博客-CSDN博客_rollup.js
