跳到主要内容
FarmFarm
Version: 2.x(最新)
本页目录

Library 打包

Farm 支持将项目构建为 库(library) ——即生成供其他包消费的输出,而非直接在浏览器或 Node.js 环境中运行。

将 output.targetEnv 设置为 "library" 即可启用库模式:

farm.config.ts
import { defineConfig } from '@farmfe/core';

export default defineConfig({
  compilation: {
    input: { index: './src/index.ts' },
    output: {
      targetEnv: 'library',
      format: 'esm',
    },
  },
});

输出格式

在库模式下,你可以通过向 output.format 传入数组,在一次构建中同时产出多种模块格式:

farm.config.ts
import { defineConfig } from '@farmfe/core';

export default defineConfig({
  compilation: {
    input: { index: './src/index.ts' },
    output: {
      targetEnv: 'library',
      format: ['esm', 'cjs'],
    },
  },
});

支持的格式:"esm"、"cjs"、"umd"、"iife"、"system"、"amd"。

打包类型

Farm 编译器有三种库打包策略,见 output.libraryBundleType:

single-bundle(默认)

将所有源模块合并为 每种格式一个输出文件。这是最简单的选项,适合小型库或希望消费者只拿到单一文件的场景。

multiple-bundle

每个入口产出独立的打包文件。入口之间共享的内部模块会被提取为独立的共享 chunk,类似于应用的代码分割。

bundle-less

每个源文件独立编译并产出为自己的输出文件,保留原始目录结构。这是组件库的推荐方式,消费者可以按需导入单个模块,从而享受 tree-shaking 优化。

使用 bundle-less 时,输出保留源代码结构。下方文件名仅为示意:默认输出可能包含内容哈希,可通过 output.filename 和 output.entryFilename 调整命名。

text
src/
  index.ts
  Button.tsx
  utils/
    format.ts

对应产出:

text
dist/
  index.js      (esm)
  Button.js
  utils/
    format.js
  index.cjs     (cjs)
  Button.cjs
  utils/
    format.cjs

外部依赖(Externals)

使用 compilation.external 将不应打入库的依赖标记为外部依赖:

farm.config.ts
import { defineConfig } from '@farmfe/core';

export default defineConfig({
  compilation: {
    input: { index: './src/index.ts' },
    output: {
      targetEnv: 'library',
      format: ['esm', 'cjs'],
    },
    external: ['react', 'react-dom'],
  },
});

对于 iife 或 umd 格式,可通过 output.externalGlobals 将外部模块名映射为全局变量名:

farm.config.ts
import { defineConfig } from '@farmfe/core';

export default defineConfig({
  compilation: {
    input: { index: './src/index.ts' },
    output: {
      targetEnv: 'library',
      format: 'umd',
      name: 'MyLibrary',
      externalGlobals: {
        react: 'React',
        'react-dom': 'ReactDOM',
      },
    },
    external: ['react', 'react-dom'],
  },
});

输出文件名

通过 output.entryFilename 和 output.filename 自定义输出文件名。支持 [entryName]、[ext]、[hash]、[contentHash] 等模板占位符:

farm.config.ts
import { defineConfig } from '@farmfe/core';

export default defineConfig({
  compilation: {
    output: {
      targetEnv: 'library',
      format: ['esm', 'cjs'],
      entryFilename: '[entryName].[ext]',
      filename: '[resourceName].[ext]',
    },
  },
});
100%

Drag or pinch to explore. Keyboard: + / − zoom, arrows pan, 0 resets, Esc closes.