Skip to main content

Compiler Setup

How It Works​

  • TypeScript or Babel provides a compiler:

    • tsc (TypeScript compiler)
    • babel (Babel compiler)

  • Compiles

    • newer language features of TypeScript or ES2015 and beyond
    • to earlier versions of JavaScript (commonly ES5) that are supported in web browsers (where the application will be running)

  • The compilation is often more specificaly referred to as transpilation.

    • Transpilation refers to a specific kind of compilation, source code to source code.
    • We traditionally think about compilers as transforming source code to bytecode.

  • To see this in action:

Setup (Babel)​

Create Project​

mkdir esdemos
cd esdemos
code . //opens Visual Studio Code

Install Babel​

  1. Open a command-prompt or terminal

  2. Change directory to esdemos

  3. Run these commands to install babel packages:

    npm init -y
    npm install --save-dev @babel/core @babel/cli @babel/preset-env

  4. Create a config file named babel.config.json in the root of your project with this content:

    babel.config.json​

    {
      "presets": ["@babel/preset-env"]
    }

  5. Create a config file name .browserslistrc in the root of the project with the following content. This file defines what browsers we will support in our application.

    .browserslistrc

    > 0.25%,
    not dead

  6. Run the following command to see which browsers will be supported.

    npx browserslist

Run Babel​

  1. Create file src\program.js
  2. Add the following code:
const greeting = "hello";
console.log(greeting);
  1. Open a command-prompt or terminal.
  2. Set the current directory to esdemos.
  3. Run this command to compile all your code from the src directory to lib:
npx babel src --watch --out-dir lib

npx allows you to run local packages and is available in npm 5.2 or higher. For more information see this article

  1. Open another (a new) command-prompt or terminal in the esdemos directory.
  • In VS Code: View> Integrated Terminal
    • Click the + or the split terminal icon
  1. Run the command:
node ./lib/program.js
  1. Result:
hello

Setup (TypeScript)​

Create Project​

mkdir typescriptdemo
cd typescriptdemo
code . //opens Visual Studio Code

Install TypeScript​

In a command-prompt or terminal

npm init -y
npm install typescript@4 --save-dev

Configure TypeScript​

  1. Open a command-prompt or terminal.

  2. Set the current directory to typescriptdemo.

  3. Run the command:

npx tsc --init

Setting the Compiler Strictness​

  1. Open tsconfig.json and change the strict setting to false. Also, set noEmitOnError to true

    /* Strict Type-Checking Options */
    "strict": false,
    "noEmitOnError": true,
    ...

    --strict​

    Enabling --strict enables --noImplicitAny, --noImplicitThis, --alwaysStrict, --strictBindCallApply, --strictNullChecks, --strictFunctionTypes and --strictPropertyInitialization.

    --strictNullChecks​

    In strict null checking mode, the null and undefined values are not in the domain of every type and are only assignable to themselves and any (the one exception being that undefined is also assignable to void).

    The default setting for the compiler option --noEmitOnError is false so output is emitted even if errors were reported. For more information on why this is the default behavior see: https://github.com/Microsoft/TypeScript/issues/828

Run TypeScript​

  1. Create file program.ts

  2. Code:

    function greeter(name) {
      console.log("Hi " + name);
    }
    greeter("Ben");

  3. Run the command

     npx tsc -w

  4. Open another (a new) command-prompt or terminal in the typescriptdemo directory.

  • In VS Code: View> Integrated Terminal
    • Click the + or the split terminal icon

  1. Run the command: node program.js

  2. Result:

    Hi Ben