ESbuild

使用 esbuild 库打包 JavaScript、TypeScript 和 JSX 文件。

配置参数

extensions string[]

The list of extensions this plugin applies to

Default:

[ ".ts", ".js" ]

esm object

Global options for esm.sh CDN used to fetch NPM packages

See https://esm.sh/#docs

dev boolean: To include the ?dev option to all packages
cjsExports record: Configure the cjs-exports option for each package
deps record: Configure the deps for each package
target es2015 es2022 esnext deno denonext: Configure the target for each package
Default:
"esnext"

options object

The options for esbuild

See https://esbuild.github.io/api/#general-options

bundle boolean: Documentation: https://esbuild.github.io/api/#bundle
Default:
true
splitting boolean: Documentation: https://esbuild.github.io/api/#splitting
preserveSymlinks boolean: Documentation: https://esbuild.github.io/api/#preserve-symlinks
outfile string: Documentation: https://esbuild.github.io/api/#outfile
metafile boolean: Documentation: https://esbuild.github.io/api/#metafile
outdir string: Documentation: https://esbuild.github.io/api/#outdir
Default:
"./"
outbase string: Documentation: https://esbuild.github.io/api/#outbase
Default:
"."
external string[]: Documentation: https://esbuild.github.io/api/#external
packages bundle external: Documentation: https://esbuild.github.io/api/#packages
alias record: Documentation: https://esbuild.github.io/api/#alias
loader object: Documentation: https://esbuild.github.io/api/#loader
resolveExtensions string[]: Documentation: https://esbuild.github.io/api/#resolve-extensions
mainFields string[]: Documentation: https://esbuild.github.io/api/#main-fields
conditions string[]: Documentation: https://esbuild.github.io/api/#conditions
write boolean: Documentation: https://esbuild.github.io/api/#write
allowOverwrite boolean: Documentation: https://esbuild.github.io/api/#allow-overwrite
tsconfig string: Documentation: https://esbuild.github.io/api/#tsconfig
outExtension object: Documentation: https://esbuild.github.io/api/#out-extension
publicPath string: Documentation: https://esbuild.github.io/api/#public-path
entryNames string: Documentation: https://esbuild.github.io/api/#entry-names
chunkNames string: Documentation: https://esbuild.github.io/api/#chunk-names
assetNames string: Documentation: https://esbuild.github.io/api/#asset-names
inject string[]: Documentation: https://esbuild.github.io/api/#inject
banner object: Documentation: https://esbuild.github.io/api/#banner
footer object: Documentation: https://esbuild.github.io/api/#footer
entryPoints string[] record object[]: Documentation: https://esbuild.github.io/api/#entry-points
stdin object: Documentation: https://esbuild.github.io/api/#stdin
plugins object[]: Documentation: https://esbuild.github.io/plugins/
absWorkingDir string: Documentation: https://esbuild.github.io/api/#working-directory
nodePaths string[]: Documentation: https://esbuild.github.io/api/#node-paths

importMap object boolean

The import map to use By default, it reads the import map from the deno.json file

Description

esbuild 插件使用 esbuild 打包器处理你的 JavaScript 和 TypeScript 文件。

Installation

在你的 _config.ts 文件中导入此插件以使用它：

import lume from "lume/mod.ts";
import esbuild from "lume/plugins/esbuild.ts";

const site = lume();

site.use(esbuild(/* 选项 */));

export default site;

Configuration

可用的选项有：

extensions: 插件将处理的文件扩展名数组。默认值为 [".js", ".ts"]。
options: 传递给 esbuild 库的选项。请参阅 esbuild 文档。
esm: 传递给 esm.sh 请求的选项。

默认选项示例：

site.use(esbuild({
  extensions: [".ts", ".js"],
  options: {
    plugins: [],
    bundle: true,
    format: "esm",
    minify: true,
    keepNames: true,
    platform: "browser",
    target: "esnext",
    treeShaking: true,
    outdir: "./",
    outbase: ".",
  },
}));

ESM

此插件将任何从 npm: 或 jsr: 导入的模块转换为 esm.sh。例如，以下代码：

import classNames from "npm:classnames";
import { concat } from "jsr:@std/bytes/concat";

被转换为：

import classNames from "https://esm.sh/classnames";
import { concat } from "https://esm.sh/classnames/jsr/@std/bytes/concat";

你可以使用 esm 键为一些包添加参数。有关更多信息，请参阅 esm.sh 文档。

例如，假设你在代码中使用 react-table，它是一个 CJS 包。

import { useTable } from "npm:react-table";

ESM.sh 并不总是能将 CJS 模块解析为 ESM，因此你可能会收到类似 react-table not provide an export named useTable 的错误。你可以使用 cjsExports 参数为此包指定导出名称：

site.use(esbuild({
  extensions: [".jsx"],
  esm: {
    cjsExports: {
      "react-table": ["useTable"],
    },
  },
}));

esm 的可用选项有：

cjsExports: 用于指定 CJS 包导出的模块。

dev: 为所有包添加 ?dev 标志。示例：

site.use(esbuild({
  esm: {
    dev: true,
  },
}));

deps: 用于指定特定包的依赖项。

site.use(esbuild({
  esm: {
    deps: {
      swr: "react@17.0.2",
    },
  },
}));

Hooks

此插件公开了以下 hooks：

addEsbuildPlugin(plugin) 用于添加额外的插件。

import lume from "lume/mod.ts";
import esbuild from "lume/plugins/esbuild.ts";
import coffeescript from "npm:esbuild-coffeescript";

const site = lume();

site.use(esbuild());

site.hooks.addEsbuildPlugin(coffeescript);

export default site;