Scribd
Upload
25 views

Learn JavaScript - Browser Compatibility and Transpilation Cheatsheet - Codecademy

The document discusses several topics related to transpiling JavaScript code for browser compatibility: - Npm scripts defined in a package.json file can combine multiple commands into one command run with npm run. For example, a "build" script transpires ES6 JavaScript to ES5. - The babel-cli and babel-preset-env packages are used to transpile ES6 JavaScript to ES5 and should be installed as dev dependencies with npm install -D. - ES6 introduced new JavaScript features in 2015 but not all browsers support it, so transpilation to ES5 provides compatibility. - Installing packages with -D adds them to devDependencies in package.json so they

Uploaded by

IliasAhmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

Learn JavaScript - Browser Compatibility and Transpilation Cheatsheet - Codecademy

The document discusses several topics related to transpiling JavaScript code for browser compatibility: - Npm scripts defined in a package.json file can combine multiple commands into one command run with npm run. For example, a "build" script transpires ES6 JavaScript to ES5. - The babel-cli and babel-preset-env packages are used to transpile ES6 JavaScript to ES5 and should be installed as dev dependencies with npm install -D. - ES6 introduced new JavaScript features in 2015 but not all browsers support it, so transpilation to ES5 provides compatibility. - Installing packages with -D adds them to devDependencies in package.json so they

Uploaded by

IliasAhmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Cheatsheets / Learn JavaScript

Browser Compatibility and


Transpilation
Running scripts with npm
Command line shortcuts can be de ned in a
package.json le in a “scripts” object. This is used to
combine multiple command line instructions in one
command. These shortcuts can be executed from the
terminal with the npm run command. For example, a
script command named "build" can be executed with
npm run build .

Babel Package Installation


The babel-cli JavaScript package contains Babel
command line tools. The babel-preset-env JavaScript
package is used to transpile ES6 JavaScript code to ES5.
They should be installed with the ag -D in the
command line instruction like npm install -D babel-
preset-env to be installed as development dependency.

ES5 & ES6 Compatibility


ECMAScript (ES) is a scripting language speci cation
standardized by Ecma International for Javascript. ES5 is
the older JavaScript version which is supported by all
web browsers while the ES6 version, released in 2015, is
not supported by all web browsers.

Installing Development JavaScript Packages


When a -D ag is used to install a JavaScript package
using the command line, this adds the package under the
property called devDependencies in a package.json le
for the project. Whenever the developer runs npm
install , all the listed packages and their dependencies
will be installed.
ES6 JavaScript backwards compatibility
ES6 is a version of JavaScript that was released in 2015
and is backward compatible. One example of how to do
this is the JavaScript Babel library which transpiles ES6
JavaScript to ES5. Transpilation is the process of
converting one programming language to another.

Babel con guration le


Babel uses the .babelrc le as a con guration le to
determine the JavaScript le’s presets, plugins and more.
It can be created with the command touch .babelrc .

Babel build process


Babel uses the npm run build commend to covert all the
JavaScript ES6 les in the src folder of the project to ES5.
This conversion makes the JavaScript code compatible
on all modern browsers. The ES5 code is written in a new
le named main.js within the folder called lib

Installing JavaScript Packages


The npm install command installs JavaScript packages to
the project directory. It creates a folder called
node_modules and copies the JavaScript package les to
it. This command also installs all the dependencies for the
given package.

Node Package Manager


The node package manager, or npm, is a package
manager for JavaScript which is used to access and
manage Node packages - modules that contain
JavaScript code written by other developers that are
meant to provide helpful tools, reduce duplication of
work, and reduce bugs.

Initiate JavaScript project


The command line instruction npm init is used to set up a
new JavaScript project. A package.json le is created by
the npm init command and contains a list of key-value
pairs that provides information about the JavaScript
project, such as the project name, version, description, a
list of node packages required for the project, command
line scripts, and more.
Caniuse.com for checking browser support
The website caniuse.com is useful for looking up the
percent of browsers that support certain features in
HTML, CSS, JavaScript, and their libraries.
For instance, you can nd out what percent of browsers
support speci c features in ES6, as covered in the
“Browser compatibility and transpilition” lesson.

Reasons to update JavaScript


Ecma international updated JavaScript from ES5 to ES6 in
2015 to make JavaScript syntax more similar to other
languages, make JavaScript syntax more e cient and
easier to read, and address ES5 bugs.

You might also like