Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 2 additions & 48 deletions docs/options/target.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,14 @@ You can disable all syntax transformations by setting the target to `false`. Thi
```

When `target` is set to `false`:

- No JavaScript syntax downleveling occurs (modern features like optional chaining `?.`, nullish coalescing `??`, etc. are preserved)
- No CSS syntax transformations are applied (modern CSS features like nesting are preserved)
- No runtime helper plugins are loaded
- The output will use the exact syntax from your source code

This is particularly useful when:

- You're targeting modern environments that support the latest JavaScript/CSS features
- You want to handle syntax transformations in a different build step
- You're building a library that will be further processed by the consuming application
Expand Down Expand Up @@ -75,54 +77,6 @@ You can also pass an array of targets to ensure compatibility across multiple en
tsdown --target chrome100 --target node20.18
```

## Runtime Helpers

When downleveling certain modern JavaScript features, `tsdown` may require runtime helpers provided by the `@oxc-project/runtime` package. For example, transforming `await` expressions into older syntax requires the helper `@oxc-project/runtime/helpers/asyncToGenerator`.

If your target includes features that require these helpers, you may need to install the `@oxc-project/runtime` package in your project:

::: code-group

```sh [npm]
npm install @oxc-project/runtime
```

```sh [pnpm]
pnpm add @oxc-project/runtime
```

```sh [yarn]
yarn add @oxc-project/runtime
```

```sh [bun]
bun add @oxc-project/runtime
```

:::

If you want to **inline helper functions** instead of importing them from the runtime package, you can install `@oxc-project/runtime` as a development dependency:

::: code-group

```sh [npm]
npm install -D @oxc-project/runtime
```

```sh [pnpm]
pnpm add -D @oxc-project/runtime
```

```sh [yarn]
yarn add -D @oxc-project/runtime
```

```sh [bun]
bun add -D @oxc-project/runtime
```

:::

# CSS Targeting

`tsdown` can also downlevel CSS features to match your specified browser targets. For example, a CSS nesting `&` selector will be flattened if the target is `chrome108` or lower.
Expand Down
50 changes: 2 additions & 48 deletions docs/zh-CN/options/target.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,14 @@
```

当 `target` 设置为 `false` 时:

- 不会进行 JavaScript 语法降级(现代特性如可选链 `?.`、空值合并 `??` 等会被保留)
- 不会应用 CSS 语法转换(现代 CSS 特性如嵌套会被保留)
- 不会加载运行时辅助插件
- 输出将使用源代码中的确切语法

这在以下情况下特别有用:

- 您的目标是支持最新 JavaScript/CSS 特性的现代环境
- 您希望在不同的构建步骤中处理语法转换
- 您正在构建一个将由使用应用程序进一步处理的库
Expand Down Expand Up @@ -75,54 +77,6 @@ tsdown --target es2020
tsdown --target chrome100 --target node20.18
```

## 运行时辅助工具

在降级某些现代 JavaScript 特性时,`tsdown` 可能需要由 `@oxc-project/runtime` 包提供的运行时辅助工具。例如,将 `await` 表达式转换为旧语法时,需要使用辅助工具 `@oxc-project/runtime/helpers/asyncToGenerator`。

如果您的目标环境包含需要这些辅助工具的特性,您可能需要在项目中安装 `@oxc-project/runtime` 包:

::: code-group

```sh [npm]
npm install @oxc-project/runtime
```

```sh [pnpm]
pnpm add @oxc-project/runtime
```

```sh [yarn]
yarn add @oxc-project/runtime
```

```sh [bun]
bun add @oxc-project/runtime
```

:::

如果您希望**内联辅助函数**,而不是从运行时包中导入它们,可以将 `@oxc-project/runtime` 作为开发依赖进行安装:

::: code-group

```sh [npm]
npm install -D @oxc-project/runtime
```

```sh [pnpm]
pnpm add -D @oxc-project/runtime
```

```sh [yarn]
yarn add -D @oxc-project/runtime
```

```sh [bun]
bun add -D @oxc-project/runtime
```

:::

# CSS 目标

`tsdown` 也可以将 CSS 特性降级以匹配您指定的浏览器目标。例如,如果目标是 `chrome108` 或更低版本,CSS 嵌套的 `&` 选择器将被展开为平铺结构。
Expand Down
2 changes: 0 additions & 2 deletions src/features/rolldown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { resolveChunkAddon, resolveChunkFilename } from './output'
import { ReportPlugin } from './report'
import { ShebangPlugin } from './shebang'
import { getShimsInject } from './shims'
import { RuntimeHelperCheckPlugin } from './target'
import type {
BuildOptions,
InputOptions,
Expand Down Expand Up @@ -128,7 +127,6 @@ export async function resolveInputOptions(
}
if (target) {
plugins.push(
RuntimeHelperCheckPlugin(logger, target),
// Use Lightning CSS to handle CSS input. This is a temporary solution
// until Rolldown supports CSS syntax lowering natively.
await LightningCSSPlugin({ target }),
Expand Down
33 changes: 0 additions & 33 deletions src/features/target.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { blue } from 'ansis'
import minVersion from 'semver/ranges/min-version.js'
import { resolveComma, toArray } from '../utils/general'
import { generateColor, prettyName, type Logger } from '../utils/logger'
import type { PackageJson } from 'pkg-types'
import type { Plugin } from 'rolldown'

export function resolveTarget(
logger: Logger,
Expand Down Expand Up @@ -38,34 +36,3 @@ export function resolvePackageTarget(pkg?: PackageJson): string | undefined {
if (nodeMinVersion.version === '0.0.0') return
return `node${nodeMinVersion.version}`
}

let warned = false
export function RuntimeHelperCheckPlugin(
logger: Logger,
targets: string[],
): Plugin {
return {
name: 'tsdown:runtime-helper-check',
resolveId: {
filter: { id: /^@oxc-project\/runtime/ },
async handler(id, ...args) {
const EXTERNAL = { id, external: true }
if (warned) return EXTERNAL

const resolved = await this.resolve(id, ...args)
if (!resolved) {
if (!warned) {
warned = true
logger.warn(
`The target environment (${targets.join(', ')}) requires runtime helpers from ${blue`@oxc-project/runtime`}. ` +
`Please install it to ensure all necessary polyfills are included.\n` +
`For more information, visit: https://tsdown.dev/options/target#runtime-helpers`,
)
}
return EXTERNAL
}
return resolved
},
},
}
}
Loading