构建与打包工具（Webpack、Rollup、Vite 等） #

这些工具帮助将 TypeScript 代码编译和打包为浏览器可执行的 JavaScript。

基本概念 #

Webpack 支持模块打包，Rollup 专注于 Tree Shaking，Vite 提供快速开发服务器。

使用场景 #

• 生产构建时优化 bundle 大小。
• 开发时热重载和快速反馈。
• 处理 TypeScript 的模块解析。

示例代码 #

Webpack 配置示例：

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ }
    ]
  },
  resolve: { extensions: ['.ts', '.js'] }
};

最佳实践 #

• 使用 ts-loader 或 babel-loader 处理 TypeScript。
• 配置 Tree Shaking 移除未用代码。
• Vite for modern projects for faster builds。