TypeScript 学习笔记（十七）：TypeScript 与现代前端构建工具的结合使用

TypeScript 学习笔记（十七）：TypeScript 与现代前端构建工具的结合使用

1. 引言

在前几篇学习笔记中，我们探讨了 TypeScript 的基础知识、前后端框架的结合应用、测试与调试技巧、性能优化、前端架构设计、工具和生态系统，以及 TypeScript 与数据库的深度结合和第三方库的结合使用。本篇将重点介绍 TypeScript 与现代前端构建工具的结合使用，包括如何配置和使用 Webpack、Rollup 和 Vite 等构建工具，来提升开发效率和优化项目构建。

2. 使用 Webpack 构建 TypeScript 项目

Webpack 是一个流行的模块打包工具，可以将项目中的各种资源（JavaScript、CSS、图片等）进行打包，生成浏览器可以直接使用的文件。

2.1 安装 Webpack 和相关依赖

# 安装 Webpack 及其 CLI 工具
npm install webpack webpack-cli --save-dev

# 安装 TypeScript 和 ts-loader
npm install typescript ts-loader --save-dev

2.2 配置 TypeScript

创建 tsconfig.json 文件。

{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "commonjs",
    "target": "es5",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

2.3 配置 Webpack

创建 webpack.config.js 文件。

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

2.4 编写 TypeScript 代码

在 src/index.ts 文件中编写简单的 TypeScript 代码。

const message: string = 'Hello, Webpack with TypeScript!';
console.log(message);

2.5 构建项目

# 运行 Webpack 构建项目
npx webpack

构建成功后，可以在 dist 目录中找到生成的 bundle.js 文件。

3. 使用 Rollup 构建 TypeScript 项目

Rollup 是一个 JavaScript 模块打包工具，特别适用于打包库。

3.1 安装 Rollup 和相关插件

# 安装 Rollup 及其 CLI 工具
npm install rollup rollup-plugin-typescript2 --save-dev

# 安装 TypeScript
npm install typescript --save-dev

3.2 配置 Rollup

创建 rollup.config.js 文件。

import typescript from 'rollup-plugin-typescript2';

export default {
  input: './src/index.ts',
  output: {
    file: './dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    typescript()
  ]
};

3.3 编写 TypeScript 代码

在 src/index.ts 文件中编写简单的 TypeScript 代码。

const message: string = 'Hello, Rollup with TypeScript!';
console.log(message);

3.4 构建项目

# 运行 Rollup 构建项目
npx rollup -c

构建成功后，可以在 dist 目录中找到生成的 bundle.js 文件。

4. 使用 Vite 构建 TypeScript 项目

Vite 是一个新兴的前端构建工具，具有快速的冷启动和即时模块热更新（HMR）特性，特别适合开发阶段使用。

4.1 创建 Vite 项目

使用 Vite 创建 TypeScript 项目。

# 创建 Vite 项目
npm create vite@latest my-vite-app -- --template vanilla-ts

# 进入项目目录
cd my-vite-app

# 安装依赖
npm install

4.2 编写 TypeScript 代码

在 src/main.ts 文件中编写简单的 TypeScript 代码。

const message: string = 'Hello, Vite with TypeScript!';
console.log(message);

4.3 启动开发服务器

# 启动 Vite 开发服务器
npm run dev

启动成功后，可以在浏览器中访问 http://localhost:3000 查看效果。

5. TypeScript 与构建工具的优化配置

在实际项目中，可能需要对构建工具进行进一步优化配置，以满足不同需求。

5.1 Webpack 优化配置

5.1.1 添加 Babel 支持

安装 Babel 相关依赖。

npm install babel-loader @babel/core @babel/preset-env --save-dev

修改 webpack.config.js 文件，添加 Babel 支持。

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

创建或修改 .babelrc 文件，配置 Babel。

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

5.1.2 代码分割和懒加载

Webpack 支持代码分割和懒加载，可以优化项目的加载速度。

const lazyLoadModule = async () => {
  const { lazyLoadedFunction } = await import('./lazyModule');
  lazyLoadedFunction();
};

document.getElementById('lazyLoadButton').addEventListener('click', lazyLoadModule);

5.2 Rollup 优化配置

5.2.1 生成类型声明文件

安装 rollup-plugin-dts 插件。

npm install rollup-plugin-dts --save-dev

修改 rollup.config.js 文件，生成类型声明文件。

import typescript from 'rollup-plugin-typescript2';
import dts from 'rollup-plugin-dts';

export default [
  {
    input: './src/index.ts',
    output: {
      file: './dist/bundle.js',
      format: 'cjs'
    },
    plugins: [
      typescript()
    ]
  },
  {
    input: './dist/src/index.d.ts',
    output: {
      file: './dist/bundle.d.ts',
      format: 'es'
    },
    plugins: [dts()]
  }
];

6. 结论

在本篇学习笔记中，我们探讨了 TypeScript 与现代前端构建工具的结合使用，包括如何配置和使用 Webpack、Rollup 和 Vite 等构建工具，以及如何对这些工具进行优化配置。通过掌握这些知识，你可以更高效地进行 TypeScript 项目的开发和构建。

下一篇学习笔记将介绍 TypeScript 与测试框架的结合使用，包括如何配置和使用 Jest、Mocha、Chai 等测试框架，希望你能继续关注本系列的学习笔记，进一步提升 TypeScript 编程技能。