How can I integrate module bundlers with TypeScript?

How can I integrate module bundlers with TypeScript?

To integrate module bundlers like Webpack or Rollup with TypeScript, you need to set up a configuration file for the bundler and ensure TypeScript is properly configured.

What specific configurations do I need for Webpack?

For Webpack, you'll need to install 'ts-loader' and configure your 'webpack.config.js' to include TypeScript files. Make sure to set the entry point and output settings.

Can you show me a sample Webpack configuration for TypeScript?

Sure! Here's a basic example:

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /.ts$/, 
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

What about Rollup? How is it different?

With Rollup, you'll use 'rollup-plugin-typescript2' for TypeScript support. The configuration is simpler, focusing on input and output files.