TypeScript 2.0-beta is out: See how to use with Babel + Webpack

I wanted to create a project using TypeScript + Babel. I knew I would have to setup a few things.

I choose to use Webpack because it has a really cool way to solve dependencies on modules which allow us to work with modules, it also has some dev tools, auto-reload... And it is nice to use loaders. But I couldn’t find any minimal simple examples, so I decided to create one.

brunolm/typescript-babel-webpack is a project with just the essential, nothing else. Simple and clean.

You can see that in this project there is a README.md where I tried to write all the steps I went through to create that setup and the issues I faced.

I recently started using Workflowy (it is free), which is a website where you can create lists and it allows you to use as a brain dump. If you want to check it out you can use this link to get extra items

https://workflowy.com/invite/35df8d82.lnx

On my Knowledge List I added things about Babel and Webpack.

And this is how I created it:

Installation

npm install -D @types/node
In TypeScript 2.0 we can install types from npm directly https://www.npmjs.com/~types
npm install -D babel-core
npm install -D babel-loader
Required on Webpack
npm install -D babel-polyfill
Allows async/await among other things
npm install -D babel-preset-es2015
npm install -D babel-preset-stage-0
npm install -D rimraf
I use to clear the output folder
npm install -D ts-loader
Required on Webpack
npm install -D typescript@beta
Installs TypeScript 2.0-beta
npm install -D webpack

To configure TypeScript I created a tsconfig.json

tsc -init
Changed "target" version to "es6"

To configure Babel I create a .babelrc file

.babelrc
{ "presets": ["es2015", "stage-0"] }

These presets come from the installs above. With ES2015 and Stage-0 I am basically saying "include everything there is to include, I want to use it all". This allows Babel to work with any code you want to use. If you want to make things lighter you could look on Babel docs how those presets work and use only what you need.

Now on Webpack I created a file webpack.config.js

module.exports = {
entry: ['babel-polyfill', './src/'],
output: {
path: __dirname,
filename: './dist/index.js',
},
resolve: {
extensions: ['', '.js', '.ts'],
},
module: {
loaders: [{
test: /\.ts$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/
}],
}
};

entry

Filename
Array of files
Object with properties that are arrays and/or strings

output

path

Defines output directory

filename

name of generated file
if entry is an object you can use `[name]` which gets the prop name to bundle in different files

resolve

extensions

Array of extensions to parse
`extensions: ['', '.js', '.ts'],`

module

loaders

Array of objects

test

Regex to test file name (test extension .ts .js)

loaders

Installed loaders to parse matched files
Run right to left
[ 'babel-loader', 'ts-loader' ]
'babel!ts'

exclude

/node_modules/

I had only one issue during this setup, I was getting an error "error TS2304: Cannot find name 'regeneratorRuntime'.". It was because I had my loaders in wrong order. The correct order is RIGHT to LEFT, so TypeScript should go last to run first. http://stackoverflow.com/a/38321269/340760

And this is how I configured it all.