@babel/helper-compilation-targets

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。发现错误？报告问题 →

@babel/helper-compilation-targets 是一个辅助包，用于处理编译目标（浏览器或 Node 等环境）和兼容性表格（记录各版本对特定语法的支持情况）。它被 @babel/preset-env 用来根据 targets 选项决定需要启用哪些插件。

JavaScript
import {
  filterItems,
  default as getTargets,
  isRequired,
} from "@babel/helper-compilation-targets";

filterItems

function filterItems(
  list: { [feature: string]: Targets },

  // A set of plugins that should always be included
  includes: Set<string>,

  // A set of plugins that should always be excluded
  excludes: Set<string>,
  targets: Targets,

  // A set of plugins that should always be included if `includes` is empty
  defaultIncludes: Array<string> | null,

  // A set of plugins that should always be excluded if `excludes` is empty
  defaultExcludes?: Array<string> | null,

  // A map from transform plugin to syntax plugin for backward compatibility with older `@babel/parser` versions
  pluginSyntaxMap?: Map<string, string | null>
): Set<string>; // A set of enabled plugins

给定兼容性数据表 list（例如 @babel/compat-data）和浏览器目标 targets，返回所需启用的插件集合。

示例

JavaScript
const compatData = {
  "transform-feature-1": {
    chrome: "1",
    firefox: "1",
  },
  "transform-feature-2": {
    chrome: "2",
    firefox: "2",
  },
  "transform-feature-3": {
    chrome: "3",
    firefox: "3",
  },
  "transform-feature-4": {
    chrome: "4",
    firefox: "4",
  },
};

// filter a set of plugins required when compiled to chrome 2
// returns new Set(["transform-feature-3", "transform-feature-4"])
filterItems(compatData, new Set(), new Set(), {
  chrome: 2,
});

// filter a set of plugins required when compiled to chrome 2 and firefox 1
// returns new Set(["transform-feature-2", "transform-feature-3", "transform-feature-4"])
filterItems(compatData, new Set(), new Set(), {
  chrome: 2,
  firefox: 1,
});

// always include "transform-feature-2" and exclude "transform-feature-4"
// returns new Set(["transform-feature-2", "transform-feature-3"])
filterItems(
  compatData,
  new Set(["transform-feature-2"]),
  new Set(["transform-feature-4"]),
  {
    chrome: 2,
  }
);

// syntax-feature-2 is required to allow older @babel/parser to parse
// the feature-2 syntax supported in chrome 2

// returns new Set(["syntax-feature-2", "transform-feature-3", "transform-feature-4"])
filterItems(
  compatData,
  new Set(),
  new Set(),
  {
    chrome: 2,
  },
  null,
  null,
  new Map([["transform-feature-2", "syntax-feature-2"]])
);

备注

当新的 ES 特性达到 stage-4 阶段时，它将在 @babel/parser 中成熟，这意味着无论是否使用插件都会被解析。但对于旧版 @babel/parser，我们仍需使用语法插件。

getTargets

type GetTargetsOption = {
  // This is not the path of the config file, but the path where start searching it from
  configPath?: string;

  // The path of the config file
  configFile?: string;

  // The env to pass to browserslist
  browserslistEnv?: string;

  // true to disable config loading
  ignoreBrowserslistConfig?: boolean;
};

type InputTargets = {
  ...Targets,

  browsers?: Browsers,

  // When `true`, this completely replaces the `browsers` option.
  // When `intersect`, this is intersected with the `browsers`
  // option (giving the higher browsers as the result).
  esmodules?: boolean | "intersect",
};

function getTargets(
  inputTargets: InputTargets = {},
  options: GetTargetsOption = {}
): Targets;

将用户指定的 targets 规范化为支持的目标列表。另见 (@babel/preset-env)[preset-env.md#options] 中的 GetTargetsOption

示例

JavaScript
// Return the default compilation targets
// returns {}
getTargets();

空的编译目标等同于强制所有转换。在 Babel 8 中，默认编译目标将改为 browserlists 查询 defaults, not IE 11。

开发者也可查询支持 ES Module 的编译目标，例如 @vue/babel-preset-app 的做法，以提供现代目标集合。

JavaScript
/* returns {
  "android": "61.0.0",
  "chrome": "61.0.0",
  "edge": "16.0.0",
  "firefox": "60.0.0",
  "ios": "10.3.0",
  "node": "13.2.0",
  "opera": "48.0.0",
  "safari": "10.1.0",
  "samsung": "8.2.0",
} */
getTargets({
  esmodules: true,
});

注意：ES Module 兼容性数据源自 MDN。

isRequired

function isRequired(
  name: string,
  targets: Targets,
  {
    compatData = pluginsCompatData,
    includes,
    excludes,
  }: {
    compatData?: { [feature: string]: Targets };
    includes?: Set<string>;
    excludes?: Set<string>;
  } = {}
): boolean;

给定浏览器目标 targets，查询 compatData 以确定插件 name 是否为编译必需项。当未指定 compatData 时，默认数据源为 @babel/compat-data

示例

babel.config.js
module.exports = api => {
  const targets = api.targets();
  // The targets have native optional chaining support
  // if `transform-optional-chaining` is _not_ required
  const optionalChainingSupported = !isRequired(
    "transform-optional-chaining",
    targets
  );
};

插件开发者可利用 isRequired 根据不同 targets 优化插件输出：

example-babel-plugin.js
// a naive plugin replace `a.b` to `a != null && a.b`
module.exports = api => {
  const targets = api.targets();
  // The targets have native optional chaining support
  // if `transform-optional-chaining` is _not_ required
  const optionalChainingSupported = !isRequired(
    "transform-optional-chaining",
    targets
  );
  const visited = new WeakSet();
  return {
    visitor: {
      MemberExpression(path) {
        if (path.matchesPattern("a.b")) {
          if (visited.has(path.node)) return;
          visited.add(path.node);
          if (optionalChainingSupported) {
            // When optional chaining is supported,
            // output `a?.b` instead of `a != null && a.b`
            path.replaceWith(api.templates`a?.b`);
          } else {
            path.replaceWith(api.templates`a != null && ${path.node}`);
          }
        }
      },
    },
  };
};

@babel/plugin-transform-object-rest-spread 使用 isRequired 判断目标环境是否已原生支持 Object.assign。

filterItems​

getTargets​

isRequired​

filterItems

getTargets

isRequired