从入门到熟练：TSup工具详解

TSup是一个前端编译工具，主要用于将TypeScript代码编译成JavaScript代码。在前端开发中，TSup扮演着至关重要的角色，能够帮助开发人员提高代码质量、减少错误并优化性能。本文将带领读者从入门到熟练地掌握TSup的使用。

一、TSup入门

1. 安装TSup

首先，确保你的系统已经安装了Node.js和npm。然后，通过以下命令安装TSup：

npm install -g tsup

这将全局安装TSup，使其在终端中可用。

1. 创建TSup配置文件

在项目根目录下创建一个名为tsup.config.js的文件，并添加以下内容：

module.exports = {
  entry: './src/index.ts', // 指定入口文件
  output: {
    path: __dirname + '/dist', // 输出目录
    filename: 'index.js', // 输出文件名
  },
  clean: true, // 开启清理选项
  sourcemap: true, // 开启生成源码映射文件选项
};

这个配置文件指定了编译的入口文件、输出目录和输出文件名。同时，开启了清理和生成源码映射文件的选项。

1. 运行TSup编译命令

在终端中进入项目根目录，并运行以下命令：

tsup

这将执行TSup编译过程，将TypeScript代码编译成JavaScript代码。编译后的代码将输出到指定的输出目录中。

二、TSup进阶应用

1. 使用TSup进行模块热替换（Hot Module Replacement）

通过配置TSup，可以轻松实现模块热替换功能。在tsup.config.js中添加以下内容：

module.exports = {
  // ...其他配置项...
  hmr: {
    include: /node_modules/, // 包含node_modules目录下的模块热替换
    exclude: /node_modules/tsup/, // 排除tsup模块热替换
  },
};

然后，运行以下命令启动模块热替换：

tsup --hmr

这将自动更新浏览器中的代码变化，而无需手动刷新页面。这对于开发过程中调试和优化代码非常有用。

1. 使用TSup进行代码拆分（Code Splitting）

通过配置TSup，可以将代码拆分成多个块，以提高加载性能。在tsup.config.js中添加以下内容：

module.exports = {
  // ...其他配置项...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: { // 指定拆分代码块名称（例如：vendor）
          test: /[\/]node_modules[\/]/, // 匹配node_modules目录下的模块进行拆分
          name: 'vendors', // 拆分后的代码块名称（例如：vendors）
          chunks: 'all', // 将所有代码块进行拆分（包括同步和异步加载的模块）
        },
      },
    },
  },
};