Post
Ask Question

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
 
 
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
  1. module.exports = {  
  2. entry: ['babel-polyfill', './src/'],  
  3. output: {  
  4. path: __dirname,  
  5. filename: './dist/index.js',  
  6. },  
  7. resolve: {  
  8. extensions: ['', '.js', '.ts'],  
  9. },  
  10. module: {  
  11. loaders: [{  
  12. test: /\.ts$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/  
  13. }],  
  14. }  
  15. };  
  • 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.
Next Recommended Reading Compile Your TypeScript File Automatically