【九月打卡】第19天 vite从入门到精通 4-4章-原创手记-慕课网

课程名称： Vite 从入门到精通，玩转新时代前端构建法则

课程章节： 4-4 Rollup 配置文件使用

课程讲师： Jokcy

课程内容：

rollup 配置文件

创建 rollup 配置文件 rollup.config.js、

单配置写法：

在文件中导出一个对象，使用 ES Module 规范导出

import json from "@rollup/plugin-json";

export default {
    input: "index.js",		// 输入文件，要编译的文件
    plugins: [json()],		// 使用的 rollup 的插件
    output: {			// 输出相关配置
        file: "dist/index.umd.js",		// 输出的文件名
        format: "umd",		// 指定输出文件格式，编译后文件模块规范
        name: "Index",		// 专用于 UMD 格式导出的名称
    },
}

多配置写法：

当然还可以导出一个数组

import json from "@rollup/plugin-json";
export default [
    {
        input: "index.js",		// 输入文件，要编译的文件
        plugins: [json()],		// 使用的 rollup 的插件
        output: {			// 输出相关配置
            file: "dist/index.umd.js",		// 输出的文件名
            format: "umd",		// 指定输出文件格式，编译后文件模块规范
            name: "Index",		// 专用于 UMD 格式导出的名称
        },
    },
    {
        input: "index.js",		// 输入文件，要编译的文件
        plugins: [json()],		// 使用的 rollup 的插件
        output: {			// 输出相关配置
            file: "dist/index.es.js",		// 输出的文件名
            format: "es",		// 指定输出文件格式，编译后文件模块规范
            name: "Index",		// 专用于 UMD 格式导出的名称
        },
    }
]

执行上面配置文件rollup --config .\rollup.config.js的时候会根据你数组中有几个对象，就根据对象中的配置编译几个文件，如：

// 引入插件
import json from "@rollup/plugin-json";

export default [
  {
    input: "index.js",
    plugins: [json()],		
    output: {
      file: "dist/index.umd.js",	
      format: "umd",
      name: "Index",
    },
  },
  {
    input: "index.js",
    plugins: [json()],
    output: {
      file: "dist/index.es.js",	
      format: "es",
      name: "Index",
    },
  },
];

这里输入同一个文件index.js输出两个文件index.umd.js和index.es.js到 dist 目录下，这里没有 dist 目录会自动创建目录

把第三方包打包在一个js文件中：

这里以 React 为模板。

我们在 index.js 文件中使用了 React，但打包后的文件中只是一import 的形式引入，而没有把 React 代码一起打包进来，但我想打包成一个 js 文件，如何实现：

实现前代码：

// index.js文件
import { funA } from "./a.js";
import pkg from "./package.json";
import React from "react";

funA();

console.log("Hello Rollup12", React.Component, pkg);


// rollup.config.js 配置文件
import json from "@rollup/plugin-json";

export default [
  {
    input: "index.js",
    plugins: [json()],
    output: {
      file: "dist/index.umd.js",
      format: "umd",
      name: "Index",
    },
  },
  {
    input: "index.js",
    plugins: [json()],
    output: {
      file: "dist/index.es.js",
      format: "es",
    },
  },
];

实现后：

安装两个插件

@rollup/plugin-node-resolve
@rollup/plugin-commonjs

// index.js文件
import { funA } from "./a.js";
import pkg from "./package.json";
import React from "react";

funA();

console.log("Hello Rollup12", React.Component, pkg);


// rollup.config.js 配置文件
import json from "@rollup/plugin-json";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";

export default [
  {
    input: "index.js",
    plugins: [resolve(), commonjs(), json()],	// 越靠前越先执行
    output: {
      file: "dist/index.umd.js",
      format: "umd",
      name: "Index",
    },
  },
  {
    input: "index.js",
    plugins: [resolve(), commonjs(), json()],
    output: {
      file: "dist/index.es.js",
      format: "es",
    },
  },
];

不想把外部的第三方包代码打入进来

可以使用 external 配置

import json from "@rollup/plugin-json";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";

export default [
  {
    input: "index.js",
    external: ["react"],		// 不需要把 react 代码打包进来
    plugins: [resolve(), commonjs(), json()],
    output: {
      file: "dist/index.es.js",
      format: "es",
    },
  },
];

在 output 中使用 plugins

在 output 中使用 plugins，和在 output 外使用 plugins 只有执行顺序的区别。

output 中使用 plugins，只有在最终文件编译做完了后才会被用到 plugins 中的插件。

output 中的 plugins 的插件比较少，这里使用 terser 来演示，如：（terser 压缩代码）

//安装插件
yarn add rollup-plugin-terser

// rollup.config.js 配置文件

import json from "@rollup/plugin-json";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import { terser } from "rollup-plugin-terser";

export default [
  {
    input: "index.js",
    external: ["react"],		// 不需要把 react 代码打包进来
    plugins: [resolve(), commonjs(), json()],
    output: {
      file: "dist/index.es.js",
      format: "es",
      plugins: [terser()],
    },
  },
];

在打包后的文件上添加注释（Banner）

使用 Banner 配置

import json from "@rollup/plugin-json";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import { terser } from "rollup-plugin-terser";

export default [
  {
    input: "index.js",
    external: ["react"],
    plugins: [resolve(), commonjs(), json()],
    output: {
      file: "dist/index.es.js",
      format: "es",
      // plugins: [terser()],
      banner: "/** Hello This is Banner **/",
    },
  },
];

output 配置使用数组

output（输出）可以使用数组，可以输出不同配置，如：

import json from "@rollup/plugin-json";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import { terser } from "rollup-plugin-terser";

export default [
  {
    input: "index.js",
    external: ["react"],
    plugins: [resolve(), commonjs(), json()],
    output: [
      {
        file: "dist/index.es.js",
        format: "es",
        // plugins: [terser()],
        banner: "/** Hello This is Banner **/",
      },
      {
        file: "dist/index.umd.js",
        format: "umd",
        name: "Index",
        // plugins: [terser()],
        banner: "/** Hello This is Banner **/",
      },
    ],
  },
];

课程收获：
理解怎么创建 rollup 的配置文件和使用
图片描述