Browser Compatibility and Transpilation
Browser Compatibility
A website using modern JavaScript may not work for all browsers or specific browser versions as it takes time for browsers to update to recognize new syntaxes. This issue is known as browser compatibility.
Transpilation
Transpilation is the process of converting a language into an equivalent version of the same language. Modern JavaScript can be transpiled into older syntax, making it compatible with older browsers.
Babel
Babel is a popular tool for transpiling modern JavaScript into more compatible versions.
Setting Up Babel
Babel is set up by installing @babel/cli and @babel/preset-env as development dependencies and providing a configuration in a .babelrc file. babel/cli provides Babel’s command-line interface while @babel/preset-env specifies a configuration for transpiling common modern JavaScript to be compatible with a wide range of browsers.
{"presets": ["@babel/preset-env"]}
Running Babel
Babel is run via the command line with arguments specifying the code Babel should run on and the location its output should be stored. The source directory is the first argument and the output location is specified with the -d flag.
babel src -d out
Targeting Browsers with Babel
Babel can be configured to target a list of browsers and browser versions for its output to be compatible with using a .browserslistrc file.
