Codecademy Logo

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.

Related Courses

Course

Learn Build Tools

Intermediate

3 Lessons
Path

Create a Front-End App with React

Intermediate

26 Lessons
Path

Create a Back-End App with JavaScript

Beginner friendly

29 Lessons