Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码。他与webpack的最大区别如下:
特性:
rollup 所有资源放同一个地方,一次性加载,利用 tree-shake特性来 剔除未使用的代码,减少冗余
webpack 拆分代码、按需加载 webpack2已经逐渐支持tree-shake
rollup:
1.打包你的 js 文件的时候如果发现你的无用变量,会将其删掉。
2.可以将你的 js 中的代码,编译成你想要的格式
webpack:
1.代码拆分
2.静态资源导入(如 js、css、图片、字体等)
拥有如此强大的功能,所以 webpack 在进行资源打包的时候,就会产生很多冗余的代码。
好了,接下来就使用rollup来打包一个员工模型。
首先通过npm init初始化项目;
创建入口文件main.ts
export default class Staff {
private name: String;
private age: Number;
private sex: String;
private skill: String;
constructor(){
this.name = '';
this.age = 0;
this.sex = '';
this.skill = '';
}
//实用技能技能
useSkill(){
console.log('我的技能是:',this.skill);
}
//设置技能
setSkill(skill){
this.skill = skill;
}
//设置员工属性
setStaff(config:Object){
for(let key in config){
this[key] = config[key];
}
}
}
接下来就是最重要的rollup配置项,在这里你可以任意的配置出你想要的输出文件,我的rollup.config.js如下:
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import {terser} from 'rollup-plugin-terser'
import babel from "rollup-plugin-babel";
import typescript from "rollup-plugin-typescript";
import sourceMaps from "rollup-plugin-sourcemaps";
import json from 'rollup-plugin-json'
export default {
input:'src/main.ts', //入口
output: {
name: 'Staff', //实例化的类名称
file: 'dist/Staff.js',//输出路径
format: 'iife',//一个自动执行的功能,适合作为<script>标签
},
plugins: [
commonjs(), // 兼容cjs
terser(), // 压缩
babel({
exclude: 'node_modules/!**',
}),// 配置babel,将es6转为es5
typescript({
exclude: "node_modules/**",
typescript: require("typescript")
}),
sourceMaps(), // 支持ts
json(), // 支持json导出
]
}
最后下载你所需要的依赖包,我的package.json如下:
{
"name": "rollup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "rollup -c rollup.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.10.2",
"rollup": "^2.52.7",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-sourcemaps": "^0.6.2",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript": "^1.0.1",
"tslib": "^2.0.1",
"typescript": "^4.3.5"
}
}
最后执行build命令即可得到你想要的js文件。