Key Concepts

Review core concepts you need to learn to master this subject

Running scripts with npm

Babel Package Installation

ES5 & ES6 Compatibility

Installing Development JavaScript Packages

ES6 JavaScript backwards compatibility

Babel configuration file

Babel build process

Installing JavaScript Packages

See more

Running scripts with npm

Command line shortcuts can be defined in a package.json file 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.

Browser Compatibility and Transpilation
Lesson 1 of 1
  1. 1
    Introduction
    You’re probably prompted to update your web browser every few months. Do you know why? A few reasons include addressing security vulnerabilities, adding features, and supporting new HTML, CSS, and …
    Start
  2. 2
    caniuse.com I
    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, ther…
    Start
  3. 3
    caniuse.com II
    Now, it’s your turn to get some practice with caniuse.com . In a new tab, open caniuse.com and complete the tasks below.
    Start
  4. 4
    Why ES6?
    Before we learn how to set up a JavaScript project that converts ES6 to an older version, it’s worth understanding a few of the reasons Ecma made such substantial updates. The version of JavaScr…
    Start
  5. 5
    Transpilation With Babel
    In the last exercise, you manually converted ES6 code to ES5. Although manual conversion only took you a few minutes, it is unsustainable as the size of the JavaScript file increases. Because ES6…
    Start
  6. 6
    npm init
    In the last exercise, you wrote one command in your terminal to transpile ES6 code to ES5. In the next five exercises you will learn how to setup a JavaScript project that transpiles code when you …
    Start
  7. 7
    Install Node Packages
    We use the npm install command to install new Node packages locally. The install command creates a folder called node_modules and copies the package files to it. The install command also instal…
    Start
  8. 8
    .babelrc
    Now that you’ve downloaded the Babel packages, you need to specify the version of the source JavaScript code. You can specify the initial JavaScript version inside of a file named .babelrc. …
    Start
  9. 9
    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 i…
    Start
  10. 10
    Build
    We’re ready to transpile our code! In the last exercise, we wrote the following script in package.json: “build”: “babel src -d lib” Now, we need to call “build” from the command line to t…
    Start
  11. 11
    Review
    In this lesson, you learned about browser compatibility and transpilation. Let’s review the key concepts: - ES5 — The old JavaScript version that is supported by all modern web browsers. - ES…
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo