ESM 静态导入：揭开 Webpack 运行时代码的神秘面纱

2023-11-06 13:20:44

Webpack 运行时代码剖析：探索 ESM 静态导入模块的奥秘

导言

Webpack，作为前端开发中炙手可热的一把利器，其核心功能之一便是构建和打包 JavaScript 代码。在 Webpack 的构建过程中，运行时代码是不可或缺的一部分，负责管理代码执行的各个方面。本文将深入探讨 Webpack 运行时代码，重点关注其 ESM 静态导入模块的奥秘。

Webpack 运行时代码概述

Webpack 运行时代码是一段由 Webpack 生成并在应用程序启动时执行的 JavaScript 代码。其主要职责包括：

加载并解析模块
管理代码依赖关系
提供异步加载和代码分割功能

ESM 静态导入模块

ESM（ECMAScript Module）是一种模块加载标准，它通过 import 语句进行静态导入。在 Webpack 中，ESM 模块通过 @web/dev-server-esbuild 加载器处理。

运行时代码剖析

让我们逐行剖析 Webpack 运行时代码中处理 ESM 静态导入模块的部分：

import { getModuleId } from "webpack/sharing/universalModuleDefinition";
import { loadFullfilledPromise } from "webpack/sharing/universalModuleIsReady";
import { executeStoredCallback } from "webpack/sharing/universalModuleExecute";

这些代码块导入 Webpack 共享模块的实用程序函数，这些函数用于模块加载和执行。

const getModule = (moduleId) => {
  try {
    moduleMap[moduleId] = remoteObject[getModuleId(moduleId)];
    return loadFullfilledPromise(moduleMap[moduleId]);
  } catch (error) {
    return Promise.reject(error);
  }
};

此代码块从远程对象中获取模块，并使用 getModuleId 实用程序函数获取模块 ID。如果模块已加载，则返回其已完成的 Promise。否则，它将被加载并返回其 Promise。

const load = (moduleId, options) => {
  return globalThis["webpackSharedModules"]
    .add(moduleId)
    .then((shareScope) => {
      if (!shareScope) {
        return Promise.reject(new Error(`Couldn't find shared scope for ${moduleId}`));
      }
      return shareScope.loadRemoteModule(moduleId, options).then((remoteModule) => {
        if (remoteModule) {
          return getModule(moduleId);
        }
        return Promise.reject(new Error(`Couldn't load remote module ${moduleId}`));
      });
    });
};

此代码块加载远程模块。它首先将模块 ID 添加到 webpackSharedModules 全局变量中，然后从远程模块共享范围内加载模块。如果成功加载，它将返回该模块。否则，它将返回一个错误 Promise。

export const dynamicImport = (moduleId, options) => {
  return load(moduleId, options).then((module) => {
    return executeStoredCallback(module);
  });
};

最后，dynamicImport 函数将加载远程模块并执行其存储的回调。