Como usar TypeScript com Webpack e Babel

Combinar TypeScript com Webpack e Babel pode aprimorar o processo de desenvolvimento ao fornecer verificação de tipo robusta, agrupamento eficiente de módulos e a capacidade de usar recursos modernos do JavaScript. Este guia abrange as etapas para configurar TypeScript com Webpack e Babel.

Etapa 1: Configurar o projeto

Comece inicializando um novo projeto Node.js e instalando as dependências necessárias.

npm init -y
npm install typescript webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-typescript --save-dev

Etapa 2: Configurar TypeScript

Crie um arquivo tsconfig.json para configurar opções do TypeScript. Este arquivo instruirá o TypeScript sobre como compilar seu código.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Etapa 3: Configurar Babel

Crie um arquivo .babelrc para configuração do Babel. Este arquivo informa ao Babel quais presets usar para transpilar o código TypeScript.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

Etapa 4: Configurar o Webpack

Crie um arquivo webpack.config.js para configurar o Webpack para agrupar os arquivos TypeScript. Este arquivo define como o Webpack deve lidar com diferentes tipos de arquivos.

const path = require('path');

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

Etapa 5: Criar arquivos de origem

Crie um arquivo src/index.ts para servir como ponto de entrada para seu aplicativo.

console.log('Hello, TypeScript with Webpack and Babel!');

Etapa 6: construir e executar

Use o Webpack para agrupar o código TypeScript em um único arquivo JavaScript. Execute o comando build para gerar a saída.

npx webpack

Conclusão

Integrar TypeScript com Webpack e Babel fornece uma configuração poderosa para desenvolvimento web moderno. Seguindo essas etapas, os desenvolvedores podem aproveitar a verificação de tipos e os recursos modernos de JavaScript do TypeScript enquanto agrupam código com Webpack e transpilam com Babel de forma eficiente.