1"use strict";(self.webpackChunkfarm_docs=self.webpackChunkfarm_docs||[]).push([[6208],{27280:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>s,contentTitle:()=>t,default:()=>p,frontMatter:()=>l,metadata:()=>d,toc:()=>c});var i=o(49214),r=o(36906);const l={},t="Syntax Downgrade and Polyfill",d={id:"advanced/polyfill",title:"Syntax Downgrade and Polyfill",description:"By default, Farm will downgrade to ES2017(native support async/await) and inject necessary polyfills automatically in production mode.",source:"@site/docs/advanced/polyfill.md",sourceDirName:"advanced",slug:"/advanced/polyfill",permalink:"/docs/advanced/polyfill",draft:!1,unlisted:!1,editUrl:"https://github.com/farm-fe/farm-fe.github.io/tree/main/docs/advanced/polyfill.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Minification",permalink:"/docs/advanced/minification"},next:{title:"Incremental Building",permalink:"/docs/advanced/persistent-cache"}},s={},c=[{value:"Configuring <code>targetEnv</code>",id:"configuring-targetenv",level:2},{value:"Configuring Syntax and Polyfill Separately",id:"configuring-syntax-and-polyfill-separately",level:2},{value:"Configuring <code>presetEnv</code>
1",id:"configuring-presetenv",level:3},{value:"Configuring <code>script.target</code>",id:"configuring-scripttarget",level:3}];function a(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"syntax-downgrade-and-polyfill",children:"Syntax Downgrade and Polyfill"})}),"\n",(0,i.jsxs)(n.p,{children:["By default, Farm will downgrade to ",(0,i.jsx)(n.code,{children:"ES2017"}),"(native support ",(0,i.jsx)(n.code,{children:"async/await"}),") and inject necessary ",(0,i.jsx)(n.code,{children:"polyfills"})," automatically in production mode."]}),"\n",(0,i.jsx)(n.admonition,{type:"note",children:(0,i.jsxs)(n.p,{children:["By default, Farm won't do transformation and inject polyfills for modules under ",(0,i.jsx)(n.code,{children:"node_modules/"}),", if you need to downgrade syntax and inject polyfills for ",(0,i.jsx)(n.code,{children:"node_modules/"})," you can use ",(0,i.jsx)(n.code,{children:"compilation.presetEnv.include"}),"."]})}),"\n",(0,i.jsxs)(n.h2,{id:"configuring-targetenv",children:["Configuring ",(0,i.jsx)(n.code,{children:"targetEnv"})]}),"\n",(0,i.jsxs)(n.p,{children:["Farm provide a normalized ",(0,i.jsx)(n.a,{href:"/docs/config/compilation-options#output-targetenv",children:(0,i.jsx)(n.code,{children:"output.targetEnv"})})," option to configure the target execution environment of your application. Farm will perform properly ",(0,i.jsx)(n.code,{children:"syntax downgrade"})," and ",(0,i.jsx)(n.code,{children:"polyfill injection"})," for your target environment automatically. For example:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="farm.config.ts"',children:"export default {\n compilation: {\n output: {\n targetEnv: 'browser-legacy'\n }\n },\n};\n"})}),"\n",(0,i.jsx)(n.p,{children:"Farm will compile your application to legacy browsers(ES5):"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Compile all ",(0,i.jsx)(n.code,{children:"Js/Jsx/Ts/Tsx"})," modules to ",(0,i.jsx)(n.code,{children:"ES5"}),", and inject all polyfills(Promise, regenerator-runtime and so on)."]}),"\n",(0,i.jsxs)(n.li,{children:["Add prefix for all ",(0,i.jsx)(n.code,{children:"css/scss/less"})," modules, for example, ",(0,i.jsx)(n.code,{children:"--webkit-"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Farm supports many normalized ",(0,i.jsx)(n.code,{children:"targetEnv"})," options like ",(0,i.jsx)(n.code,{children:"browser-modern"}),", ",(0,i.jsx)(n.code,{children:"browser-es2017"}),", ",(0,i.jsx)(n.code,{children:"browser-es2015"}),", ",(0,i.jsx)(n.code,{children:"node16"}),", ",(0,i.jsx)(n.code,{children:"node-legacy"}),", etc. ",(0,i.jsxs)(n.strong,{children:["By default, ",(0,i.jsx)(n.code,{children:"targetEnv"})," is ",(0,i.jsx)(n.code,{children:"browser-es2017"})]}),". Refer to ",(0,i.jsx)(n.a,{href:"/docs/config/compilation-options#output-targetenv",children:(0,i.jsx)(n.code,{children:"output.targetEnv"})}),"."]}),"\n",(0,i.jsx)(n.admonition,{type:"note",children:(0,i.jsxs)(n.p,{children:["You may need to install ",(0,i.jsx)(n.code,{children:"core-js@3"})," or ",(0,i.jsx)(n.code,{children:"regeneration-runtime"})," manually if polyfill is needed. Try run ",(0,i.jsx)(n.code,{children:"pnpm add core-js"})," if you met something error like ",(0,i.jsx)(n.code,{children:"can not resolve 'core-js/modules/xxx'"})]})}),"\n",(0,i.jsx)(n.h2,{id:"configuring-syntax-and-polyfill-separately",children:"Configuring Syntax and Polyfill Separately"}),"\n",(0,i.jsxs)(n.p,{children:["Internally, ",(0,i.jsx)(n.code,{children:"targetEnv"})," just presets of ",(0,i.jsx)(n.code,{children:"presetEnv"}),", ",(0,i.jsx)(n.code,{children:"script.target"})," and ",(0,i.jsx)(n.code,{children:"css.prefixer"}),". You can configure them more precisely if you need."]}),"\n",(0,i.jsxs)(n.h3,{id:"configuring-presetenv",children:["Configuring ",(0,i.jsx)(n.code,{children:"presetEnv"})]}),"\n",(0,i.jsxs)(n.p,{children:["You can use ",(0,i.jsx)(n.code,{children:"compilation.presetEnv"})," to custom syntax downgrade and polyfill injection. By default all modules under ",(0,i.jsx)(n.code,{children:"node_modules"})," will be ignored. Using ",(0,i.jsx)(n.code,{children:"include"})," to add extra modules that need to be polyfilled."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="farm.config.ts"',children:"export default {\n compilation: {\n presetEnv: {\n // include a package under node_modules\n include: ['node_modules/package-name'],\n options: {\n targets: \"Chrome >= 48\"\n }\n }\n },\n};\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Note that if your project does not require browser compatibility, you can use set a looser value for ",(0,i.jsx)(n.code,{children:"targets"}),", then less polyfills will be injected and output sizes will be smaller."]}),"\n",(0,i.jsxs)(n.p,{children:["Refer to ",(0,i.jsx)(n.a,{href:"/docs/config/farm-config#presetenv",children:"compilation.presetEnv"})," for more options."]}),"\n",(0,i.jsxs)(n.h3,{id:"configuring-scripttarget",children:["Configuring ",(0,i.jsx)(n.code,{children:"script.target"})]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"script.target"})," is used to control the target env when generate code. If you want to downgrade your project to ",(0,i.jsx)(n.code,{children:"ES5"}),", you should set both:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",metastring:'title="farm.config.ts"',children:"export default {\n compilation: {\n script: {\n target: 'ES5'\n },\n presetEnv: {\n // include a package under node_modules\n include: ['node_modules/package-name'],\n options: {\n targets: \"> 0.25%, not dead\"\n }\n }\n },\n};\n"})})]})}function p(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}}}]);
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.