【九月打卡】第20天 vite从入门到精通 4-5章

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

课程章节： 4-5 Rollup 插件功能解析（上）

课程讲师： Jokcy

课程内容：

rollup 插件

rollup 插件是 rollup 能够提供我们非常强大构造能力的一个基础。

它有非常多的核心功能都是通过插件来实现的。

rollup 官方维护了一套非常完整的 rollup 插件，同时也有第三方插件帮助我们去扩展功能，如果我们想扩展 rollup 功能的话，也可以自己去写插件。

rollup 插件整体流程

rollup 整体插件机制，相等来说也是好理解的：

输入的内容（inpute）-> rollup 核心代码处理（rollup main）-> 调用一个个不同的插件（plugin1） -> 调用插件2（plugin2）-> … -> 输出到文件当中 （emit file）-> 整个流程结束（finish）

Hook

对于 rollup 来说它的 插件系统 最重要的一个概念就是 Hook。

Hook 就是 钩子 的意思。

钩子的意思就是，对应到不同运行的节点。它会主动 钩出（触发） 你在插件里面设置的这块内容，然后去调用它得到一个新的结果。

rollup 它会在不同的阶段设置不同的 钩子 的名字，然后去插件里面通过这个 钩子 实现对应阶段功能

rollup 配置中，是函数的大部分是 Hook

• buildStart()

  对整体的 rollup 配置进行修改

• resolveId()

  解析一个文件，它的路径可以在这个过程中替换它

通用配置

• include
• exclude

三个官方插件

• alias（别名）

  // 安装
  yarn add @rollup/plugin-alias
  
  // 使用
  // rollup.config.js
  import alias from "@rollup/plugin-alias";
  
  export default [
    {
      input: "index.js",
      external: ["react"],
      plugins: [
        alias({
          entries: {
            a: "./a.js",	// 配置 a.js 的文件路径
          },
        }),
      ],
      output: [
        {
          file: "dist/index.es.js",
          format: "es",
          name: "Index",
          banner: "/** Hello This is Banner **/",
        },
      ],
    },
  ];
  
  // index.js
  // 这里引入要引入 a.js 文件，路径就可以直接写，给 a.js 文件路径配置好的别名
  import { funA } from "a";	
  import pkg from "./package.json";
  import React from "react";
  
  funA();
  
  console.log("Hello Rollup12", React.Component, pkg);
  
  // 打包
  npx rollup --config .\rollup.config.js
  

• babel

• replace

大部分 rollup 插件都可以直接在 Vite 中使用的，Vite 插件其实是继承 rollup 插件功能的

课程收获：
对 rollup 的插件执行的流程有了一定的了解。
明白 rollup 中的 Hook。
知道 alias 插件的使用，和源码的理解