Rollup 插件机制

import { rollup, watch } from "rollup";
import InputOptions from "./rollup.config.js";

(async function () {
  // 打包阶段
  const bundle = await rollup(InputOptions);
  // 生成阶段
  await bundle.generate(InputOptions.output);
  // 写入阶段
  await bundle.write(InputOptions.output);
  // 监听文件变化，如果不手动关闭，会一直监听
  const watcher = watch(InputOptions);
  watcher.on("event", (event) => {
    console.log(event);
  });
  setTimeout(() => {
    watcher.close(); // 手动关闭watcher监听
  }, 2000);
  // 关闭阶段
  await bundle.close();
})();

export default {
  input: "./src/index.js",
  output: {
    dir: "dist",
  },
};

import fs from "fs";

function build() {
  return {
    name: "build",
    async watchChange(id, change) {
      console.log("watchChange", id, change);
    },
    async closeWatcher() {
      console.log("closeWatcher");
    },
    async options(inputOptions) {
      console.log("options");
      //inputOptions.input = './src/main.js';
    },
    async buildStart(inputOptions) {
      console.log("buildStart");
    },
    async resolveId(source, importer) {
      if (source === "virtual") {
        console.log("resolveId", source);
        //如果resolveId钩子有返回值了，那么就会跳过后面的查找逻辑，以此返回值作为最终的模块ID
        return source;
      }
    },
    //加载此模块ID对应的内容
    async load(id) {
      if (id === "virtual") {
        console.log("load", id);
        return `export default "virtual"`;
      }
    },
    async shouldTransformCachedModule({ id, code, ast }) {
      console.log("shouldTransformCachedModule");
      //不使用缓存，再次进行转换
      return true;
    },
    async transform(code, id) {
      console.log("transform");
    },
    async moduleParsed(moduleInfo) {
      console.log("moduleParsed");
    },
    async resolveDynamicImport(specifier, importer) {
      console.log("resolveDynamicImport", specifier, importer);
    },
    async buildEnd() {
      console.log("buildEnd");
    },
  };
}
export default build;

import build from './plugins/rollup-plugin-build.js';
export default {
  input: "./src/index.js",
  output: [{
    dir: 'dist',
  }],
  plugins: [
   build()
  ]
}

// index.js
import hello from "./hello.js";

import virtual from "virtual-module"; // 例如这是虚拟模块
console.log(virtual);

/*
需要加一个polyfill
最终结果
import 'polyfill';
console.log('index.js')
*/
console.log("index.js");

//我们在polyfill id前面加上\0，告诉其他插件不要尝试加载或转换它
const POLYFILL_ID = "\0polyfill";
const PROXY_SUFFIX = "?inject-polyfill-proxy";

export default function injectPolyfillPlugin() {
  return {
    name: "inject-polyfill",
    async resolveId(source, importer, options) {
      if (source === POLYFILL_ID) {
        //重要的是，对于polyfills，应始终考虑副作用
        //否则，使用`treeshake.moduleSideEffects:false`可能会阻止包含polyfill
        return { id: POLYFILL_ID, moduleSideEffects: true };
      }
      if (options.isEntry) {
        //确定实际的入口是什么。我们需要skipSelf来避免无限循环。
        const resolution = await this.resolve(source, importer, {
          skipSelf: true,
          ...options,
        });
        //如果它无法解决或是外部的，只需返回它，这样Rollup就可以显示错误
        if (!resolution || resolution.external) return resolution;
        //在代理的加载钩子中，我们需要知道入口是否有默认导出
        //然而，在那里，我们不再有完整的“解析”对象，它可能包含来自其他插件的元数据，这些插件只在第一次加载时添加
        //仅在第一次加载时添加。因此我们在这里触发加载。
        const moduleInfo = await this.load(resolution);
        //我们需要确保即使对于treeshake来说，原始入口点的副作用也得到了考虑。moduleSideEffects:false。
        //moduleSideEffects是ModuleInfo上的一个可写属性
        moduleInfo.moduleSideEffects = true;
        //重要的是，新入口不能以\0开头，并且与原始入口具有相同的目录，以免扰乱相对外部导入的生成
        //此外，保留名称并在末尾添加一个“？查询”可以确保preserveModules将为该条目生成原始条目名称
        return `${resolution.id}${PROXY_SUFFIX}`;
      }
      return null;
    },
    load(id) {
      if (id === POLYFILL_ID) {
        // 替换为实际的polyfill import '@babel/polyfill'
        return "console.log('polyfill');";
      }
      if (id.endsWith(PROXY_SUFFIX)) {
        const entryId = id.slice(0, -PROXY_SUFFIX.length);
        //我们知道ModuleInfo.hasDefaultExport是可靠的，因为我们在等待在resolveId中的this.load
        // We know ModuleInfo.hasDefaultExport is reliable because we awaited this.load in resolveId
        const { hasDefaultExport } = this.getModuleInfo(entryId);
        let code =
          `import ${JSON.stringify(POLYFILL_ID)};` +
          `export * from ${JSON.stringify(entryId)};`;
        //命名空间重新导出不会重新导出默认值，因此我们需要在这里进行特殊处理
        if (hasDefaultExport) {
          code += `export { default } from ${JSON.stringify(entryId)};`;
        }
        return code;
      }
      return null;
    },
  };
}

import { createFilter } from "@rollup/pluginutils";
import babel from "@babel/core";
function plugin(pluginOptions = {}) {
  const defaultExtensions = [".js", ".jsx"];
  const { exclude, include, extensions = defaultExtensions } = pluginOptions;
  const extensionRegExp = new RegExp(`(${extensions.join("|")})$`);
  const userDefinedFilter = createFilter(include, exclude);
  const filter = (id) => extensionRegExp.test(id) && userDefinedFilter(id);
  return {
    name: "babel",
    async transform(code, filename) {
      if (!filter(filename)) return null;
      let result = await babel.transformAsync(code);
      return result;
    },
  };
}
export default plugin;

import("./msg.js").then((res) => console.log(res));

import build from "./plugins/rollup-plugin-build.js";
import generation from "./plugins/rollup-plugin-generation.js";
export default {
  input: "./src/index.js",
  output: [{ dir: "dist" }],
  plugins: [build(), generation()],
};

function generation() {
  return {
    name: "rollup-plugin-generation",
    // 没有加async的都必须是同步的
    outputOptions() {
      console.log("outputOptions");
    },
    async renderStart(outputOptions) {
      console.log(outputOptions, "renderStart");
    },
    async banner() {
      console.log("banner");
    },
    async footer() {
      console.log("footer");
    },
    async intro() {
      console.log("intro");
    },
    async outro() {
      console.log("outro");
    },
    renderDynamicImport() {
      console.log("renderDynamicImport");
    },
    argumentChunkHash() {
      console.log("argumentChunkHash");
    },
    resolveFileUrl() {
      console.log("resolveFileUrl");
    },
    resolveImportMeta() {
      console.log("resolveImportMeta");
    },
    async renderChunk() {
      console.log("renderChunk");
    },
    async generateBundle() {
      console.log("generateBundle");
    },
    async writeBundle() {
      console.log("writeBundle");
    },
    async renderError() {
      console.log("renderError");
    },
    async closeBundle() {
      console.log("closeBundle");
    },
  };
}

export default generation;

import("./title.js").then((result) => console.log(result));

export default function dynamicImportPolyfillPlugin() {
  return {
    name: "dynamic-import-polyfill",
    renderDynamicImport() {
      return {
        left: "dynamicImportPolyfill(",
        right: ", import.meta.url)",
      };
    },
  };
}

// 这是输出结果
dynamicImportPolyfill('./msg-ca034dda.js', import.meta.url).then(res => console.log(res.default));
// 需要自己实现polyfill
function dynamicImportPolyfill(filename, url) {
  return new Promise((resolve) => {
    const script = document.createElement("script");
    script.type = "module";
    script.onload = () => {
      resolve(window.mod);
    };
    const absURL = new URL(filename, url).href;
    console.log(absURL);
    const blob = new Blob([
      `import * as mod from "${absURL}";`,
      ` window.mod = mod;`], { type: "text/javascript" });
    script.src = URL.createObjectURL(blob);
    document.head.appendChild(script);
  });

import logger from "logger";
console.log(logger);

function resolveFileUrlPlugin(options = {}) {
  return {
    name: "resolveFileUrl",
    resolveId(source) {
      //source = logger
      if (source === "logger") {
        return source;
      }
    },
    load(importee) {
      if (importee === "logger") {
        //向输出目录里生成一个新的文件，文件名叫logger.js ,文件内容叫console.log("logger")
        let referenceId = this.emitFile({
          type: "asset",
          source: 'export default "logger"',
          fileName: "logger.js",
        });
        return `export default import.meta.ROLLUP_FILE_URL_${referenceId}`;
        // return `
        //    var loggerUrl = import.meta.ROLLUP_FILE_URL_${referenceId};
        //    import(loggerUrl).then(result=>console.log(result.default))
        //    export default loggerUrl;
        // `;
      }
    },
    //用来自定义url地址的 import  logger from
    /**
     * 所以它肯定是一个路径
    var logger = new URL('logger.js', import.meta.url).href;
     var logger = new URL('logger.js', document.baseURI).href;
     但是如果需要import logger 能打印出'logger', resolveFileUrl就没有用处，需要在load中返回
     */
    resolveFileUrl({
      fileName,
      chunkId,
      format,
      moduleId,
      referenceId,
      relativePath,
    }) {
      return `new URL('${fileName}',document.baseURI).href`;
    },
  };
}
export default resolveFileUrlPlugin;

function html() {
  return {
    name: "html",
    generateBundle(options, bundle) {
      let entryName;
      for (let filename in bundle) {
        if (bundle[filename].isEntry) {
          entryName = filename;
        }
      }
      this.emitFile({
        // emitFile是直接给bundle中新增一个文件，最后在统一输出
        type: "asset", // 表示发射一个静态文件，可以是html,css,图片等
        fileName: "index.html",
        source: `
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
        </head>
        <body>
          <script src="${entryName}" type="module"></script>
        </body>
        </html>
        `,
      });
    },
  };
}

export default html;

type EmittedChunk {
  type: 'chunk';
  id: string;
  name?: string;
  fileName?: string
}
type EmittedAsset {
  type: 'asset';
  name?: string;
  fileName?: string;
  source?: string | Unit8Array
}
let referenceId1 = this.emitFile({
  type: 'asset'
})
let referenceId2 = this.emitFile({
  type: 'chunk'
})