1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([["13169"],{37326:function(e,t,n){n.r(t),n.d(t,{metadata:function(){return r},default:function(){return p},frontMatter:function(){return i},contentTitle:function(){return o},toc:function(){return c},assets:function(){return l}});var r=JSON.parse('{"id":"babel-helper-compilation-targets","title":"@babel/helper-compilation-targets","description":"@babel/helper-compilation-targets is a helper package that works with compilation targets (browsers or other environments like node) and compat tables (knowing what version supports a specific syntax). It is used by @babel/preset-env to determine which plugin should be enabled based on the targets option.","source":"@site/../docs/helper-compilation-targets.md","sourceDirName":".","slug":"/babel-helper-compilation-targets","permalink":"/docs/babel-helper-compilation-targets","draft":false,"unlisted":false,"editUrl":"https://github.com/babel/website/edit/main/docs/../docs/helper-compilation-targets.md","tags":[],"version":"current","frontMatter":{"id":"babel-helper-compilation-targets","title":"@babel/helper-compilation-targets","sidebar_label":"helper-compilation-targets"},"sidebar":"docs","previous":{"title":"@babel/types","permalink":"/docs/babel-types"},"next":{"title":"helper-module-imports","permalink":"/docs/babel-helper-module-imports"}}'),a=n(62540),s=n(43023);let i={id:"babel-helper-compilation-targets",title:"@babel/helper-compilation-targets",sidebar_label:"helper-compilation-targets"},o,l={},c=[{value:"filterItems",id:"filteritems",level:2},{value:"getTargets",id:"gettargets",level:2},{value:"isRequired",id:"isrequired",level:2}];function d(e){let t={a:"a",admonition:"admonition",code:"code",h2:"h2",p:"p",pre:"pre",strong:"strong",...(0,s.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.code,{children:"@babel/helper-compilation-targets"})," is a helper package that works with compilation targets (browsers or other environments like node) and compat tables (knowing what version supports a specific syntax). It is used by ",(0,a.jsx)(t.code,{children:"@babel/preset-env"})," to determine which plugin should be enabled based on the ",(0,a.jsx)(t.a,{href:"/docs/options#targets",children:(0,a.jsx)(t.code,{children:"targets"})})," option."]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-js",metastring:'title="JavaScript"',children:'import {\n filterItems,\n default as getTargets,\n isRequired,\n} from "@babel/helper-compilation-targets";\n'})}),"\n",(0,a.jsx)(t.h2,{id:"filteritems",children:"filterItems"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-typescript",children:"function filterItems(\n list: { [feature: string]: Targets },\n\n // A set of plugins that should always be included\n includes: Set<string>,\n\n // A set of plugins that should always be excluded\n excludes: Set<string>,\n targets: Targets,\n\n // A set of plugins that should always be included if `includes` is empty\n defaultIncludes: Array<string> | null,\n\n // A set of plugins that should always be excluded if `excludes` is empty\n defaultExcludes?: Array<string> | null,\n\n // A map from transform plugin to syntax plugin for backward compatibility with older `@babel/parser` versions\n pluginSyntaxMap?: Map<string, string | null>\n): Set<string>; // A set of enabled plugins\n"})}),"\n",(0,a.jsxs)(t.p,{children:["Given a compat data table ",(0,a.jsx)(t.code,{children:"list"})," (i.e. ",(0,a.jsx)(t.code,{children:"@babel/compat-data"}),") and ",(0,a.jsx)(t.a,{href:"/docs/babel-preset-env#targets",children:"browser targets"})," ",(0,a.jsx)(t.code,{children:"targets"}),", return a set of required plugins."]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Example"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-js",metastring:'title="JavaScript"',children:'const compatData = {\n "transform-feature-1": {\n chrome: "1",\n firefox: "1",\n },\n "transform-feature-2": {\n chrome: "2",\n firefox: "2",\n },\n "transform-feature-3": {\n chrome: "3",\n firefox: "3",\n },\n "transform-feature-4": {\n chrome: "4",\n firefox: "4",\n },\n};\n\n// filter a set of plugins required when compiled to chrome 2\n// returns new Set(["transform-feature-3", "transform-feature-4"])\nfilterItems(compatData, new Set(), new Set(), {\n chrome: 2,\n});\n\n// filter a set of plugins required when compiled to chrome 2 and firefox 1\n// returns new Set(["transform-feature-2", "transform-feature-3", "transform-feature-4"])\nfilterItems(compatData, new Set(), new Set(), {\n chrome: 2,\n firefox: 1,\n});\n\n// always include "transform-feature-2" and exclude "transform-feature-4"\n// returns new Set(["transform-feature-2", "transform-feature-3"])\nfilterItems(\n compatData,\n new Set(["transform-feature-2"]),\n new Set(["transform-feature-4"]),\n {\n chrome: 2,\n }\n);\n\n// syntax-feature-2 is required to allow older @babel/parser to parse\n// the feature-2 syntax supported in chrome 2\n\n// returns new Set(["syntax-feature-2", "transform-feature-3", "transform-feature-4"])\nfilterItems(\n compatData,\n new Set(),\n new Set(),\n {\n chrome: 2,\n },\n null,\n null,\n new Map([["transform-feature-2", "syntax-feature-2"]])\n);\n'})}),"\n",(0,a.jsx)(t.admonition,{type:"note",children:(0,a.jsxs)(t.p,{children:["When a new ES feature reaches stage-4, it will be matured in ",(0,a.jsx)(t.code,{children:"@babel/parser"}),", which means it will always be parsed regardless of the plugin. However we need the syntax plugin for older ",(0,a.jsx)(t.code,{children:"@babel/parser"}),"."]})}),"\n",(0,a.jsx)(t.h2,{id:"gettargets",children:"getTargets"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-typescript",children:'type GetTargetsOption = {\n // This is not the path of the config file, but the path where start searching it from\n configPath?: string;\n\n // The path of the config file\n configFile?: string;\n\n // The env to pass to browserslist\n browserslistEnv?: string;\n\n // true to disable config loading\n ignoreBrowserslistConfig?: boolean;\n};\n\ntype InputTargets = {\n ...Targets,\n\n browsers?: Browsers,\n\n // When `true`, this completely replaces the `browsers` option.\n // When `intersect`, this is intersected with the `browsers`\n // option (giving the higher browsers as the result).\n esmodules?: boolean | "intersect",\n};\n\nfunction getTargets(\n inputTargets: InputTargets = {},\n options: GetTargetsOption = {}\n): Targets;\n'})}),"\n",(0,a.jsxs)(t.p,{children:["Normalize user specified ",(0,a.jsx)(t.code,{children:"targets"})," to a list of supported targets. See also (",(0,a.jsx)(t.code,{children:"@babel/preset-env"}),")[preset-env.md#options] for ",(0,a.jsx)(t.code,{children:"GetTargetsOption"})]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Example"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-js",metastring:'title="JavaScript"',children:"// Return the default compilation targets\n// returns {}\ngetTargets();\n"})}),"\n",(0,a.jsxs)(t.p,{children:["An empty compilation target is equivalent to ",(0,a.jsx)(t.a,{href:"/docs/babel-preset-env#forcealltransforms",children:"force all transforms"}),". The default compilation targets will be changed to browserlists query ",(0,a.jsx)(t.a,{href:"https://runkit.com/jlhwung/605cd58b2c44c6001a463717",children:(0,a.jsx)(t.code,{children:"defaults, not IE 11"})})," in Babel 8."]}),"\n",(0,a.jsxs)(t.p,{children:["One can also query the compilation targets with ES Module support, like ",(0,a.jsx)(t.a,{href:"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app",children:(0,a.jsx)(t.code,{children:"@vue/babel-preset-app"})})," did in order to provide a set of modern targets."]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-js",metastring:'title="JavaScript"',children:'/* returns {\n "android": "61.0.0",\n "chrome": "61.0.0",\n "edge": "16.0.0",\n "firefox": "60.0.0",\n "ios": "10.3.0",\n "node": "13.2.0",\n "opera": "48.0.0",\n "s
1afari": "10.1.0",\n "samsung": "8.2.0",\n} */\ngetTargets({\n esmodules: true,\n});\n'})}),"\n",(0,a.jsxs)(t.p,{children:["Note: The ES Module compat data is generated from ",(0,a.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#browser_compatibility",children:"MDN"}),"."]}),"\n",(0,a.jsx)(t.h2,{id:"isrequired",children:"isRequired"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-typescript",children:"function isRequired(\n name: string,\n targets: Targets,\n {\n compatData = pluginsCompatData,\n includes,\n excludes,\n }: {\n compatData?: { [feature: string]: Targets };\n includes?: Set<string>;\n excludes?: Set<string>;\n } = {}\n): boolean;\n"})}),"\n",(0,a.jsxs)(t.p,{children:["Given browser targets ",(0,a.jsx)(t.code,{children:"targets"}),", query the ",(0,a.jsx)(t.code,{children:"compatData"})," whether plugin ",(0,a.jsx)(t.code,{children:"name"})," is required for compilation. When ",(0,a.jsx)(t.code,{children:"compatData"})," is not specified, the default data source is ",(0,a.jsx)(t.code,{children:"@babel/compat-data"})]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Example"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-javascript",metastring:'title="babel.config.js"',children:'module.exports = api => {\n const targets = api.targets();\n // The targets have native optional chaining support\n // if `transform-optional-chaining` is _not_ required\n const optionalChainingSupported = !isRequired(\n "transform-optional-chaining",\n targets\n );\n};\n'})}),"\n",(0,a.jsxs)(t.p,{children:["Plugin authors can use ",(0,a.jsx)(t.code,{children:"isRequired"})," to optimize plugin output given different ",(0,a.jsx)(t.code,{children:"targets"}),":"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-javascript",metastring:'title="example-babel-plugin.js"',children:'// a naive plugin replace `a.b` to `a != null && a.b`\nmodule.exports = api => {\n const targets = api.targets();\n // The targets have native optional chaining support\n // if `transform-optional-chaining` is _not_ required\n const optionalChainingSupported = !isRequired(\n "transform-optional-chaining",\n targets\n );\n const visited = new WeakSet();\n return {\n visitor: {\n MemberExpression(path) {\n if (path.matchesPattern("a.b")) {\n if (visited.has(path.node)) return;\n visited.add(path.node);\n if (optionalChainingSupported) {\n // When optional chaining is supported,\n // output `a?.b` instead of `a != null && a.b`\n path.replaceWith(api.templates`a?.b`);\n } else {\n path.replaceWith(api.templates`a != null && ${path.node}`);\n }\n }\n },\n },\n };\n};\n'})}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.a,{href:"https://github.com/babel/babel/blob/d54bc3cd1c1c462760e01c0a8c4bd4b3013f236a/packages/babel-plugin-transform-object-rest-spread/src/index.ts#L33",children:(0,a.jsx)(t.code,{children:"@babel/plugin-transform-object-rest-spread"})})," uses ",(0,a.jsx)(t.code,{children:"isRequired"})," to determine whether targets already have native ",(0,a.jsx)(t.code,{children:"Object.assign"})," support."]})]})}function p(e={}){let{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},43023:function(e,t,n){n.d(t,{R:function(){return i},x:function(){return o}});var r=n(63696);let a={},s=r.createContext(a);function i(e){let t=r.useContext(s);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.