如何在 Webpack 和 Babel 中使用 TypeScript

将 TypeScript 与 Webpack 和 Babel 结合使用可以提供强大的类型检查、高效的模块捆绑以及使用现代 JavaScript 功能的能力，从而增强开发过程。本指南介绍了使用 Webpack 和 Babel 设置 TypeScript 的步骤。

步骤 1：设置项目

首先初始化一个新的 Node.js 项目并安装必要的依赖项。

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

第 2 步：配置 TypeScript

创建一个 tsconfig.json 文件来配置 TypeScript 选项。此文件将指示 TypeScript 如何编译您的代码。

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

步骤 3：配置 Babel

为 Babel 配置创建一个 .babelrc 文件。此文件告诉 Babel 使用哪些预设来转译 TypeScript 代码。

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

步骤4：配置Webpack

创建一个 webpack.config.js 文件来设置 Webpack 以打包 TypeScript 文件。此文件定义 Webpack 应如何处理不同类型的文件。

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',
};

步骤 5：创建源文件

创建一个 src/index.ts 文件作为应用程序的入口点。

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

步骤 6：构建并运行

使用 Webpack 将 TypeScript 代码打包成单个 JavaScript 文件。运行 build 命令以生成输出。

npx webpack

结论

将 TypeScript 与 Webpack 和 Babel 集成，为现代 Web 开发提供了强大的设置。通过遵循以下步骤，开发人员可以利用 TypeScript 的类型检查和现代 JavaScript 功能，同时高效地使用 Webpack 打包代码并使用 Babel 进行转译。