The reasons above imply there is a period before a software update is released when there are security vulnerabilities and unsupported language syntax.
Upon release, web developers quickly adopted the new ES6 syntax, as it improved readability and efficiency. However, ES6 was not supported by most web browsers, so developers ran into browser compatibility issues.
In this lesson, you will learn about two important tools for addressing browser compatibility issues.
Finding browser compatibility
Since Ecma’s release of ECMAScript2015 (ES6), software companies have slowly added support for ES6 features and syntax. While most new browser versions support the majority of the ES6 library, there are still a couple sources of compatibility issues:
- Some users have not updated to the latest, ES6 supported web browser version.
- A few ES6 features, like modules, are still not supported by most web browsers.
Because companies add support for ES6 features gradually, it’s important for you to know how to look up browser support on a feature-by-feature basis. The website caniuse.com is the best resource for finding browser compatibility information.
In caniuse, you can enter an ES6 feature, like let, and see the percentage of browsers that recognize it. You can also see when each major web browser (Chrome, Safari, Edge, etc.) added support for the keyword.
- Readability and economy of code — The new syntax is often easier to understand (more readable) and requires fewer characters to create the same functionality (economy of code).
- Addresses sources of ES5 bugs — Some ES5 syntax led to common bugs. With ES6, Ecma introduced syntax that mitigates some of the most common pitfalls.
Because ES6 addressed the above issues, Ecma knew that adoption by web developers would occur quickly, while web browser support lagged behind.
Transpilation With Babel
Transpilation is the process of converting one programming language to another.
Before we can add Babel to our project directory, we need to run npm init. The npm init command creates a package.json file in the root directory.
- Metadata — This includes a project title, description, authors, and more.
- A list of node packages required for the project — If another developer wants to run your project, npm looks inside package.json and downloads the packages in this list.
- Key-value pairs for command line scripts — You can use npm to run these shorthand scripts to perform some process.
If you have Node installed on your computer, you can create a package.json file by typing npm init into the terminal.
The terminal prompts you to fill in fields for the project’s metadata (name, description, etc.)
You are not required to answer the prompts, though we recommend at minimum, you add your own title and description. If you don’t want to fill in a field, you can press enter. npm will leave fill these fields with default values or leave them empty when it creates the package.json file.
After you run npm init your directory structure will contain the following files and folders:
npm adds the package.json file to the same level as the src directory.
Install Node Packages
We use the npm install command to install new Node packages locally. The installcommand creates a folder called node_modules and copies the package files to it. The install command also installs all of the dependencies for the given package.
To install Babel, we need to npm install two packages, babel-cli and babel-preset-env. However, npm installs over one hundred other packages that are dependencies for Babel to run properly.
We install Babel with the following two commands:
|$ npm install babel-cli -D
$ npm install babel-preset-env -D
The -D flag instructs npm to add each package to a property called devDependencies in package.json. Once the project’s dependencies are listed in devDependencies, other developers can run your project without installing each package separately. Instead, they can simply run npm install — it instructs npm to look inside package.json and download all of the packages listed in devDependencies.
Once you npm install packages, you can find the Babel packages and all their dependencies in the node_modules folder. The new directory structure contains the following:
The … in the file structure above is a placeholder for 100+ packages that npm installed.
Your project directory contains the following folders and files:
Babel Source Lib
There’s one last step before we can transpile our code. We need to specify a script in package.json that initiates the ES6+ to ES5 transpilation.
Inside of the package.json file, there is a property named “scripts” that holds an object for specifying command line shortcuts. It looks like this:
“test”: “echo \”Error: no test specified\” && exit 1″
In the code above, the “scripts” property contains an object with one property called “test”. Below the “test” property, we will add a script that runs Babel like this:
“test”: “echo \”Error: no test specified\” && exit 1″,
“build”: “babel src -d lib”
In the “scripts” object above, we add a property called “build”. The property’s value, “babel src -d lib”, is a command line method that transpiles ES6+ code to ES5. Let’s consider each argument in the method call:
- babel — The Babel command call responsible for transpiling code.
- -d — Instructs Babel to write the transpiled code to a directory.
- lib — Babel writes the transpiled code to a directory called lib.
We’re ready to transpile our code! The following script in package.json transpile the code:
|“build”: “babel src -d lib”|
Now, we need to call “build” from the command line to transpile and write ES5 code to a directory called lib.
From the command line, we type:
|npm run build|
The command above runs the build script in package.json.
Babel writes the ES5 code to a file named main.js (it’s always the same name as the original file), inside of a folder called lib. The resulting directory structure is:
Notice, the directory contains a new folder named lib, with one file, called main.js.
In this lesson, you learned about browser compatibility and transpilation. Let’s review the key concepts:
- npm init — A terminal command that creates a package.json file.
- npm install — A command that installs Node packages.
- babel-cli — A Node package that contains command line tools for Babel.
- babel-preset-env — A Node package that contains ES6+ to ES5 syntax mapping information.
- “build” script — A package.json script that you use to transpile ES6+ code to ES5.
npm run build — A command that runs the build script and transpiles ES6+ code to ES5.