Babel 中文网
  • 中文文档
  • 设置
  • 试一试
  • 视频(需翻墙)
  • 博客
  • 团队
  • 英文官网

›预设(Presets)

指南

  • Babel 是什么?
  • 使用指南
  • 配置 Babel
  • 学习 ES2015
  • 升级到 Babel 7

配置

  • Config Files
  • Config Options
  • 预设(Presets)
  • 插件
  • Plugins List
  • Compiler assumptions

预设(Presets)

  • @babel/preset-env
  • @babel/preset-react
  • @babel/preset-typescript
  • @babel/preset-flow

杂项

  • 路线图
  • 附加说明
  • Features Timeline
  • FAQ
  • 编辑器

集成

  • @babel/cli
  • @babel/polyfill
  • @babel/plugin-transform-runtime
  • @babel/register
  • @babel/standalone

工具

  • @babel/parser
  • @babel/core
  • @babel/generator
  • @babel/code-frame
  • @babel/runtime
  • @babel/template
  • @babel/traverse
  • @babel/types

辅助

  • helper-compilation-targets
  • helper-module-imports
Edit

@babel/preset-typescript

如果您使用了 TypeScript 这一 JavaScript 超集,则建议您使用此预设(preset)。它包含以下插件:

  • @babel/plugin-transform-typescript

你需要为 @babel/cli 和 @babel/node 命令行工具指定 --extensions ".ts" 参数,以使其能够处理 .ts 文件。

示例

输入

const x: number = 0;

输出

const x = 0;

安装

npm install --save-dev @babel/preset-typescript

用法

通过配置文件(推荐)

{
  "presets": ["@babel/preset-typescript"]
}

通过命令行工具(CLI)

babel --presets @babel/preset-typescript script.ts

通过 Node API

require("@babel/core").transformSync("code", {
  presets: ["@babel/preset-typescript"],
});

参数

isTSX

boolean 类型,默认值为 false。

强制开启 jsx 解析。否则,尖括号将被视为 typescript 的类型断言(type assertion) var foo = <string>bar;。另外,isTSX: true 需要 allExtensions: true

jsxPragma

string 类型,默认值为 React。

替换编译 JSX 表达式时所使用的函数。这样我们就能知道是 import 而不是 type import,因此不应将其删除。

jsxPragmaFrag

string, defaults to React.Fragment

Replace the function used when compiling JSX fragment expressions. This is so that we know that the import is not a type import, and should not be removed.

allExtensions

boolean 类型,默认值为 false。

Indicates that every file should be parsed as TS, TSX, or as TS without JSX ambiguities (depending on the isTSX and disallowAmbiguousJSXLike options).

allowNamespaces

boolean 类型,使用 @babel/plugin-transform-typescript 的默认设置。

Added in: v7.6.0

开启 TypeScript 命名空间的编译。

allowDeclareFields

boolean 类型,默认值为 false。

添加于: v7.7.0

注意:此参数在 Babel 8 中将默认开启。

When enabled, type-only class fields are only removed if they are prefixed with the declare modifier:

class A {
  declare foo: string; // Removed
  bar: string; // Initialized to undefined
  prop?: string; // Initialized to undefined
  prop1!: string // Initialized to undefined
}

disallowAmbiguousJSXLike

boolean, defaults to true for .mts and .cts files and to false otherwise.

Added in: v7.16.0

Even when JSX parsing is not enabled, this option disallows using syntax that would be ambiguous with JSX (<X> y type assertions and <X>() => {} type arguments). It matches the tsc behavior when parsing .mts and .mjs files.

onlyRemoveTypeImports

boolean 类型,默认值为 false。

添加于: v7.9.0

当设置为 true 时,转换时只是删除 type-only imports (在 TypeScript 3.8 版本中引入)。仅在使用 TypeScript >= 3.8 版本时才应使用此参数。

optimizeConstEnums

boolean, defaults to false

Added in: v7.15.0

When set to true, Babel will inline enum values rather than using the usual enum output:

// Input
const enum Animals {
  Fish
}
console.log(Animals.Fish);

// Default output
var Animals;

(function (Animals) {
  Animals[Animals["Fish"] = 0] = "Fish";
})(Animals || (Animals = {}));

console.log(Animals.Fish);

// `optimizeConstEnums` output
console.log(0);

This option differs from TypeScript's --isolatedModules behavior, which ignores the const modifier and compiles them as normal enums, and aligns Babel's behavior with TypeScript's default behavior.

However, when exporting a const enum Babel will compile it to a plain object literal so that it doesn't need to rely on cross-file analysis when compiling it:

// Input
export const enum Animals {
  Fish,
}

// `optimizeConstEnums` output
export var Animals = {
  Fish: 0,
};

您可以在 这里 可以阅读到更多有关配置预设参数的信息。

← @babel/preset-react@babel/preset-flow →
  • 示例
  • 安装
  • 用法
    • 通过配置文件(推荐)
    • 通过命令行工具(CLI)
    • 通过 Node API
  • 参数
    • isTSX
    • jsxPragma
    • jsxPragmaFrag
    • allExtensions
    • allowNamespaces
    • allowDeclareFields
    • disallowAmbiguousJSXLike
    • onlyRemoveTypeImports
    • optimizeConstEnums
Babel 中文网
中文文档
学习 ES2015
社区
视频(需翻墙)用户列表Stack OverflowSlack ChannelTwitter
更多
博客GitHub OrgGitHub RepoWebsite Repo旧版 6.x 网址旧版 5.x 网址
友链
Bootstrap中文网ReactNext.jsDocusaurusBlitzGatsbyRecoilReduxMDXMarkdownVue.jsAlpine.jsVuePressNuxt.jsGridsomePreactSvelteSapperWebpackRollup.jsParcelNPMYarnpnpmGulpjQuerySASSTailwindCSSPurgeCSScssnanoPostCSSJestWebAssemblyDeno
Babel 中文文档采用 MIT 开源协议发布。
本站点(babeljs.cn)仅用于 “Babel 中文文档”,与 babeljs.io 没有任何关系。Babel 项目及相关资源的版权归 babeljs.io 所有。
冀ICP备14002930号-1