十分钟上手打包工具 Rollup

十分钟上手打包工具 Rollup

简介

rollup 是一个用来打包 js 代码的工具。ES 模块化是由浏览器来支持的，但是 rollup 可以让你在 node 环境下提前使用，ES 模块化是支持 tree-shaking 的，可以最大化的减小包体积

学前思考

为什么使用 rollup？

上手简单，用来打包纯 js 模块的话特别好用

rollup 的使用场景是什么？

目前个人主要是拿来打包自己的 npm 工具包，如果是打包应用程序的话，还是使用 webpack 比较好

开始上手

1. 新建文件夹，初始化项目

mkdir stu-rollup
cd  stu-rollup
npm init -y

2. 安装

npm i rollup -S

3. 新建入口文件 src/main.js

// src/main.js

import { num1 } from "./num.js";

const str = `导入了num1----》 ${num1}`;

export default function () {
  console.log(str);
}

4. 新建依赖文件 src/num.js

// src/num.js
export const num1 = 1;
export const num2 = 22;
export const num3 = 333;

5. 新建 rollup 的配置文件 rollup.config.js，进行简单配置

// rollup.config.js

export default {
  // 打包文件的入口
  input: "src/main.js",
  // 打包文件的出口
  output: {
    // 文件出口所在路径
    file: "dist/bundle.js",
    // 打包之后的js使用的模块方法，cjs是commonjs
    format: "cjs",
  },
};

6. 运行 rollup -c

步骤完成之后就可以在 dist/bundle.js 中看到输出文件

"use strict";

const num1 = 1;

const str = `导入了num1----》 ${num1}`;

function main() {
  console.log(str);
}

module.exports = main;

结束了，入门就是就是这么简单

rollup 常用插件

1. rollup-plugin-terser（压缩打包代码）

安装 rollup-plugin-terser 插件

npm install rollup-plugin-terser --save-dev
# or with yarn
yarn add rollup-plugin-terser -D

配置如下：

// rollup.config.js

import { terser } from "rollup-plugin-terser";

export default {
  input: "src/main.js",
  output: {
    file: "dist/bundle.js",
    format: "cjs",
  },
  plugins: [terser()],
};

打包之后 dist/bundle.js 将输出压缩之后的代码

"use strict";module.exports=function(){ console.log("导入了num1----》 1");};

2. rollup-plugin-cleanup（去除无效代码）

安装 rollup-plugin-terser 插件

npm install rollup-plugin-cleanup --save-dev
# or with yarn
yarn add rollup-plugin-cleanup -D

配置如下：

// rollup.config.js

import awesome from "rollup-plugin-awesome";
import cleanup from "rollup-plugin-cleanup";

export default {
  input: "src/main.js",
  output: {
    file: "dist/bundle.js",
    format: "cjs",
  },
  plugins: [
    awesome(), // other plugins
    cleanup(), // cleanup here
  ],
};