Esbuild无文件系统构建：重复导入处理与摇树优化失败求助

问题分析 #

你的代码存在以下核心问题，导致无法正确合并依赖、实现Tree Shaking：

1. 插件解析逻辑缺失resolveDir：onResolve未传递解析目录，ESBuild无法识别模块上下文关联，将依赖模块单独输出而非合并到主bundle。
2. outdir配置冗余：write: false时outdir不生效，反而触发ESBuild生成多文件输出，与单bundle期望冲突。
3. 测试代码存在未定义变量：console.log(B)会导致编译错误，中断打包流程。
4. 缺少必要依赖导入：FC来自React但未导入，ESBuild无法正确转译TSX语法。

修正后的代码 #

核心打包函数 #

import { build, Plugin, Loader, BuildOptions } from 'esbuild';

export interface ConfigSource {
  code: string;
  name: string;
  loader: Loader;
}

export interface Config {
  sources: ConfigSource[];
  options?: BuildOptions;
}

function babelBuildWithBundle(main: ConfigSource, config: Config) {
  const buildModuleRuntime: Plugin = {
    name: 'buildModuleRuntime',
    setup(build) {
      build.onResolve({ filter: /^\.\// }, (args) => {
        // 传递解析目录，确保模块上下文正确
        return { 
          path: args.path, 
          namespace: 'localModule',
          resolveDir: args.resolveDir 
        };
      });

      build.onLoad({ filter: /.*/, namespace: 'localModule' }, (args) => {
        // 提取模块名称（去掉相对路径前缀和扩展名）
        const moduleName = args.path.replace(/^\.\//, '').split('.')[0];
        const source = config.sources.find(
          (s) => s.name.split('.')[0] === moduleName
        );

        if (!source) {
          throw new Error(`Module ${args.path} not found`);
        }

        return {
          contents: source.code,
          loader: source.loader,
          sourcefile: source.name,
        };
      });
    },
  };

  return build({
    stdin: {
      contents: main.code,
      loader: main.loader,
      sourcefile: main.name,
      resolveDir: process.cwd(),
    },
    bundle: true,
    write: false,
    format: 'esm',
    treeShaking: true, // 显式开启Tree Shaking（ESBuild默认bundle模式下已开启）
    // minify: true, // 可选：开启代码压缩进一步优化
    plugins: [buildModuleRuntime],
  });
}

测试代码 #

const foo = `
import { FC } from 'react';
export const Foo = FC(() => {
  return <div>gyron</div>;
});
`;

const app = `
import { FC } from 'react';
import { Foo } from './foo';

function App(): JSX.Element {
  console.log(Foo);
  return <Foo />;
}
`;

// 执行打包
const bundle = await babelBuildWithBundle(
  {
    loader: 'tsx',
    code: app,
    name: 'app.tsx',
  },
  {
    sources: [
      {
        loader: 'tsx',
        code: foo,
        name: 'foo.tsx',
      },
    ],
  }
);

// 输出打包后的代码
console.log(bundle.outputFiles[0].text);

关键修正说明 #

• 移除outdir：write: false时ESBuild将bundle内容存入outputFiles数组，无需指定输出目录，避免多文件生成。
• 传递resolveDir：确保ESBuild正确识别模块上下文，将依赖合并到主bundle中。
• 修复编译错误：补全React导入、修正未定义变量，保证打包流程正常执行。
• 显式配置Tree Shaking：增强代码可读性，ESBuild会自动剔除未使用的导出内容。

预期输出 #

打包后的代码会将App和Foo合并为一个ES模块，Tree Shaking自动移除未使用代码，最终输出类似：

import { createElement } from "react";
var Foo = function() {
  return /* @__PURE__ */ createElement("div", null, "gyron");
};
function App() {
  console.log(Foo);
  return /* @__PURE__ */ createElement(Foo, null);
}

内容的提问来源于stack exchange，提问作者Link