Your Web Component may work in modern browsers yet fail in IE11 before it even runs: IE11 does not understand newer JavaScript features such as classes and arrow functions. Transpilation turns newer JavaScript into older JavaScript that the browser can read. It can also turn a language such as TypeScript or CoffeeScript into JavaScript. Unlike compilation to a lower-level output, the result remains readable source code. section 12.5 section 12.4
Transpilation is not the whole compatibility build. Rollup bundles imported modules; Babel transforms the JavaScript. For a component that needs IE11 support, bundle it first, then run Babel on the bundle to produce a separate older-browser file. If you only target browsers that support your component natively, you may not need that extra build. section 12.5 section 12.2
A small Babel setup adds the transformation without making it part of the component shipped to users:
- Install @babel/core, @babel/cli, and @babel/preset-env as development dependencies. section 12.5
- Configure the @babel/preset-env preset, then give the Babel command a bundled input file and a separate output filename. section 12.5
- Add npm scripts for each component and combine the Rollup and Babel scripts into one build command. section 12.5
Listing 12.12. A Babel transpile step for each component
"build-slider-ie": "./node_modules/.bin/babel chapter12and13/components/slider/slider.js --out-file chapter12and13/components/slider/slider.build.js", "build-coordpicker-ie": "./node_modules/.bin/babel chapter12and13/components/coordpicker/coordpicker.js --out-file chapter12and13/components/coordpicker/coordpicker.build.js", "build-colorpicker-ie": "./node_modules/.bin/babel chapter12and13/components/colorpicker/colorpicker.js --out-file chapter12and13/components/colorpicker/colorpicker.build.js",
These npm scripts show the repeatable step: each bundled component file becomes a separate .build.js file for the older-browser build. section 12.5
Do not expect Babel to supply every missing browser feature. IE11 still needs a Custom Elements polyfill, and the component example also needs a CSS custom-property ponyfill. Likewise, a separate Edge gradient fix uses RGBA colors rather than relying on transpilation. Check the browser behavior after building, not just whether the build finishes. section 2.7 section 12.5 section 12.2
