rollup学习笔记

一直使用的webpack,最近突然想了解下rollup,就花点时间学习下.

一,什么是rollup?

rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码,比如我们的es6模块化代码,它就可以进行tree shaking,将无用代码进行清除,打包出精简可运行的代码包.
业务开发项目的时候,我们一般是使用的webpack,它的功能更全面,但是如果我们只是为了打包js库之类的代码,那么使用rollup更为方便.

二,快速开始

2.1,安装

npm install --global rollup

创建入口文件:

mkdir src
touch src/main.js

编写入口文件内容main.js:

import foo from "./foo.js";
export default function () {
  console.log(foo);
}

同样在src下创建foo.js文件,然后编写foo.js文件内容:

export default {
    say:'hello world'
}

项目根目录下新增文件 rollup.config.js(看你怎么写的,如果是export default这种es6的写法,就用mjs结尾或者在package.json文件中指明type:‘module’)

export default {
    input: "src/main.js",
    output: {
      file: "bundle.js",
      format: "cjs",
    },
  };

2.2,打包

在控制台执行

rollup -c

就可以生成boundle.js:

'use strict';
var foo = "hello world!";
function main () {
  console.log(foo);
}
module.exports = main;

三,使用第三方npm类库

如果我们使用的是第三方类库,则有两点东西需要考虑处理.
安装lodash:

npm i lodash

先修改main.js文件,引入使用lodash.

import foo from "./foo.js";
import { isString } from 'lodash-es';
console.log(isString("hello"))
export default function () {
  console.log(foo);
}

3.1,@rollup/plugin-commonjs将commonjs转es模块

这个插件的作用就是将 CommonJS 模块转换为 ES 模块，以便在 Rollup 中进行打包。使用 @rollup/plugin-commonjs，你可以在 Rollup 中引入和使用来自 npm 包的 CommonJS 模块，而无需手动进行转换。这个插件还支持一些高级功能，比如解析动态导入语法和处理循环依赖。通过在 Rollup 配置文件中添加 @rollup/plugin-commonjs，你可以更方便地使用 Rollup 打包项目中的 CommonJS 模块。
安装:

npm install @rollup/plugin-commonjs --save-dev

使用:

import commonjs from '@rollup/plugin-commonjs'
export default {
    input: "src/main.js",
    output: {
      file: "bundle.js",
      format: "esm",
    },
    plugins: [commonjs()],
  };

修改main.js和打包后是这样的:

3.2,使用@rollup/plugin-node-resolve解析Node.js模块

安装插件:

npm i @rollup/plugin-node-resolve --save-dev

修改rollup配置:

import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from '@rollup/plugin-commonjs'
export default {
    input: "src/main.js",
    output: {
      file: "bundle.js",
      format: "esm",
    },
    plugins: [nodeResolve(),commonjs()]
  };

这时候打包的效果
这时候,可以看到,lodash引入使用的string方法被直接搞出来,放到bundle.js中去了.
有些场景下,虽然我们使用了 resolve 插件，但可能我们仍然想要某些库保持外部引用状态，这时我们就需要使用 external 属性，来告诉 rollup.js 哪些是外部的类库。
这就需要external属性.
修改rollup配置:

import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from '@rollup/plugin-commonjs'
export default {
    input: "src/main.js",
    output: {
      file: "bundle.js",
      format: "esm",
    },
    plugins: [nodeResolve(),commonjs()],
    external: ["lodash-es"],
  };

这时候打包出来的bundle就又会变成这样:

四,多产物配置

我们可以将 output 改造成一个数组，对外暴露出不同格式的产物供他人使用，不仅包括 ESM，也需要包括诸如CommonJS、UMD等格式，保证良好的兼容性:
修改rollup配置文件:

import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from '@rollup/plugin-commonjs'
export default {
    input: "src/main.ts",
    output: [
      {
        file: 'dist/bundle-iife.js',
        format: 'iife'
      },
      {
        file: 'dist/bundle-esm.js',
        format: 'esm'
      },
      {
        file: 'dist/bundle-cjs.js',
        format: 'cjs'
      },
      {
        file: 'dist/bundle-umd.js',
        format: 'umd',
        name: 'bundle'
      }
    ],
    plugins: [nodeResolve(),commonjs()],
    external: ["lodash-es"],
 };

这样打包出来就是dist下多个产物.

五,引入typescript

要使用typescript就需要依赖这个插件，当然这个插件本身还依赖了typescript和tslib，因此我们需要导入3个包:

npm i typescript tslib @rollup/plugin-typescript -D

然后修改rollup配置为:

import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from '@rollup/plugin-commonjs'
import typescript from '@rollup/plugin-typescript';
export default {
    input: ["src/main.ts"],
    output: [
      {
        file: 'dist/bundle-iife.js',
        format: 'iife'
      },
      {
        file: 'dist/bundle-esm.js',
        format: 'esm'
      },
      {
        file: 'dist/bundle-cjs.js',
        format: 'cjs'
      },
      {
        file: 'dist/bundle-umd.js',
        format: 'umd',
        name: 'bundle'
      }
    ],
    plugins: [
      typescript(),
      nodeResolve(),
      commonjs()
    ],
    external: ["lodash-es"],
 };

就可以看到打包的效果:

六,使用压缩插件

安装

npm install @rollup/plugin-terser --save-dev

使用:

import terser from '@rollup/plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [terser()]
};

得到的结果解释压缩了空格回车之类的精简代码.

七,使用rollup-plugin-dts生成ts配置文件

在前端开发中，我们经常需要将 TypeScript 代码转换为 JavaScript 以便在浏览器或 Node.js 环境下运行，而 rollup 是一个强大的打包工具，用于将代码库打包为一个或多个 bundle。但是，当我们希望使用 TypeScript 编写 npm 包并将其发布到 npm 时，我们需要为我们的包创建 .d.ts（TypeScript类型定义）文件，以允许 TypeScript 用户在其代码中正确使用我们的包。这时候我们就可以使用 rollup-plugin-dts 了，该插件可以帮助我们自动生成 .d.ts 文件。
安装:

npm install --save-dev rollup-plugin-dts

配置修改:

import { dts } from "rollup-plugin-dts";
export default {
    plugins: [
    	dts()
    ]
 };

实现的效果是dist输出目录下多生成了一个名为dts的文件夹.里面就是ts的类型定义:

/**
 * 深拷贝
 * @param obj 需要深拷贝的对象
 * @returns 深拷贝对象
 */
export declare const deepClone: <T>(obj: T) => T;
export declare const getRandomNum: (min: number, max: number) => number;

八,使用@rollup/plugin-html生成html并引用打包文件

可以使用@rollup/plugin-html生成html,并引用打包文件.
安装

npm i @rollup/plugin-html. -S

使用方式

import html from '@rollup/plugin-html'
export default {
    input: ["src/main.ts"],
    output: [
      {
        file: 'dist/bundle-cjs.js',
        format: 'cjs'
      }
    ],
    plugins: [
      html({
        title: "LeaferJS",
        meta: [{charset: 'utf-8'}, {name: 'viewport', content: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'}]
      }),
    ],
    external: ["lodash-es"],
 };

这样打包之后,就可以在dist目录下生成一个html文件了.

九,使用rollup-plugin-serve 插件来生成静态服务器

Rollup 还可以作为开发服务器来使用。安装 rollup-plugin-serve 插件：
安装:

npm install rollup-plugin-serve --save-dev

使用:

import serve from 'rollup-plugin-serve';
plugin中配置:
serve({
        contentBase: ['dist'],
        port: 9000
})

这个配置使用 rollup-plugin-serve 插件启动了一个本地服务器，将端口号设置为 8080，并指定静态文件根目录为 dist 文件夹。
现在我们可以在终端中运行以下命令来启动 Rollup 开发服务器：

rollup -c -w

这个命令将 Rollup 配置文件传递给 Rollup 命令行工具，并启用监视模式 -w，使 Rollup 可以监听文件变化并重新构建源代码和输出代码。一旦命令运行成功，我们就可以在浏览器中访问 http://localhost:8080 来查看我们的应用程序。