Simple lightweight TypeScript 2.0 Babel Webpack project

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 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
  • 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.

Advertisements

One thought on “Simple lightweight TypeScript 2.0 Babel Webpack project

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s