TypeScript-Babel-Starter

What is this?

This is a small sample repository that uses Babel to transform TypeScript to plain JavaScript, and uses TypeScript for type-checking. This README will also explain step-by-step how you can set up this repository so you can understand how each component fits together.

For simplicity, we've used babel-cli with a bare-bones TypeScript setup, but we'll also demonstrate integration with JSX/React, as well as adding bundlers into the mix. Specifically, we'll show off integration with Webpack for if you're deploying an application, and Rollup for if you're producing a library.

How do I use it?

Building the repo

npm run build

Type-checking the repo

npm run type-check

And to run in --watch mode:

npm run type-check:watch

How would I set this up myself?

Install your dependencies

Either run the following:

npm install --save-dev typescript @babel/core @babel/cli @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/preset-env @babel/preset-typescript @babel/plugin-proposal-numeric-separator

or make sure that you add the appropriate "devDependencies" entries to your package.json and run npm install:

"devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
    "@babel/plugin-proposal-numeric-separator": "^7.4.0",
    "@babel/preset-env": "^7.4.1",
    "@babel/preset-typescript": "^7.3.2",
    "typescript": "^3.3.3"
}

Create your tsconfig.json

Then run

tsc --init --declaration --allowSyntheticDefaultImports --target esnext --outDir lib

Note: TypeScript also provides a --declarationDir option which specifies an output directory for generated declaration files (.d.ts files). For our uses where --emitDeclarationOnly is turned on, --outDir works equivalently.

Create your .babelrc

Then copy the .babelrc in this repo, or the below:

{
    "presets": [
        "@babel/env",
        "@babel/typescript"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}

Set up your build tasks

Add the following to the "scripts" section of your package.json

"scripts": {
    "type-check": "tsc --noEmit",
    "type-check:watch": "npm run type-check -- --watch",
    "build": "npm run build:types && npm run build:js",
    "build:types": "tsc --emitDeclarationOnly",
    "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline"
}

How do I change it?

Using JSX (and React)

Full example available here

Install your dependencies

Install the @babel/preset-react package as well as React, ReactDOM, and their respective type declarations

npm install --save react react-dom @types/react @types/react-dom
npm install --save-dev @babel/[email protected]

Update .babelrc

Then add "@babel/react" as one of the presets in your .babelrc.

Update tsconfig.json

Update your tsconfig.json to set "jsx" to "react".

Use a .tsx file

Make sure that any files that contain JSX use the .tsx extension. To get going quickly, just rename src/index.ts to src/index.tsx, and add the following lines to the bottom:

import React from 'react';
export let z = <div>Hello world!</div>;

Using Webpack

Full example available here

Install your dependencies

npm install --save-dev webpack webpack-cli [email protected]

Create a webpack.config.js

Create a webpack.config.js at the root of this project with the following contents:

var path = require('path');

module.exports = {
    // Change to your "entry-point".
    entry: './src/index',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json']
    },
    module: {
        rules: [{
            // Include ts, tsx, js, and jsx files.
            test: /\.(ts|js)x?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }],
    }
};

Create a build task

Add

"bundle": "webpack"

to the scripts section in your package.json.

Run the build task

npm run bundle

Using Rollup

Full example available here

Install your dependencies

npm install --save-dev rollup rollup-plugin-babel@latest rollup-plugin-node-resolve rollup-plugin-commonjs

Create a rollup.config.js

Create a rollup.config.js at the root of this project with the following contents:

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import pkg from './package.json';

const extensions = [
  '.js', '.jsx', '.ts', '.tsx',
];

const name = 'RollupTypeScriptBabel';

export default {
  input: './src/index.ts',

  // Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)
  // https://rollupjs.org/guide/en#external-e-external
  external: [],

  plugins: [
    // Allows node_modules resolution
    resolve({ extensions }),

    // Allow bundling cjs modules. Rollup doesn't understand cjs
    commonjs(),

    // Compile TypeScript/JavaScript files
    babel({ extensions, include: ['src/**/*'] }),
  ],

  output: [{
    file: pkg.main,
    format: 'cjs',
  }, {
    file: pkg.module,
    format: 'es',
  }, {
    file: pkg.browser,
    format: 'iife',
    name,

    // https://rollupjs.org/guide/en#output-globals-g-globals
    globals: {},
  }],
};

Create a build task

Add

"bundle": "rollup -c"

to the scripts section in your package.json.

Run the build task

npm run bundle