Tsup工具的进阶玩法：监听模式、垫片注入、资产目录拷贝和环境变量控制

探索 Tsup 高级用法：掌控构建过程

Tsup 是一款强大的 JavaScript 工具，用于快速构建和打包前端项目。掌握 Tsup 的高级功能可以帮助你提升构建过程的效率和灵活性。在本文中，我们将深入探究 Tsup 的监听模式、垫片注入、资产目录拷贝和编译时环境变量控制等高级用法。

1. 监听模式：实时更新

Tsup 的监听模式让你在保存文件时自动重新编译项目。这对于快速开发和调试非常有用。只需在命令行中添加 --watch 选项即可启用监听模式，如下所示：

tsup --watch

你还可以通过在 Tsup 配置文件中设置 watch 选项为 true 来启用监听模式：

{
  "watch": true
}

2. 垫片注入：定制构建过程

Tsup 支持垫片注入，允许你执行自定义任务以扩展构建过程。垫片是一个 JavaScript 函数，接受一个 Tsup 构建上下文对象作为参数。你可以使用该对象访问 Tsup 配置、文件系统和构建结果。

要使用垫片，请在 Tsup 配置文件中添加一个 shim 选项。shim 选项是一个字符串或字符串数组，指定要加载的垫片文件，如下所示：

{
  "shim": "./my-shim.js"
}

3. 资产目录拷贝：轻松管理静态资源

Tsup 可以轻松地将静态资源（例如图像、字体和样式表）拷贝到构建输出目录。在 Tsup 配置文件中添加一个 copy 选项即可使用此功能。copy 选项是一个字符串或字符串数组，指定要拷贝的文件或目录：

{
  "copy": [
    "./public",
    "./assets"
  ]
}

4. 编译时环境变量控制：动态配置构建过程

Tsup 允许你设置编译时环境变量，可以在 Tsup 配置文件和垫片中使用。要设置编译时环境变量，请使用命令行选项 --env 或 -e，如下所示：

tsup --env NODE_ENV=production

你也可以在 Tsup 配置文件中设置 env 选项：

{
  "env": {
    "NODE_ENV": "production"
  }
}

5. 其他有用的功能

除了上述高级用法外，Tsup 还提供其他功能来增强你的构建过程：

• Tree Shaking： 自动删除未使用代码，减小构建大小。
• Source Maps： 生成映射文件，便于调试。
• ES Modules 支持： 支持 ES 模块语法，实现模块化和代码复用。

结论

掌握 Tsup 的高级用法可以大大提升你的前端构建效率。监听模式、垫片注入、资产目录拷贝和编译时环境变量控制等功能使你能够定制和优化构建过程，从而创建更快速、更可靠的应用程序。

常见问题解答

问：如何同时启用多个垫片？
答：在 Tsup 配置文件的 shim 选项中指定一个字符串数组即可，例如 ["shim1.js", "shim2.js"]。

问：我可以使用垫片做什么？
答：你可以使用垫片执行各种任务，例如转换文件、注入代码或修改构建结果。

问：编译时环境变量的用途是什么？
答：编译时环境变量允许你根据不同的构建环境动态配置构建过程，例如针对开发、测试或生产环境。

问：Tsup 的优势是什么？
答：Tsup 的主要优势包括快速构建速度、垫片支持和编译时环境变量控制。

问：Tsup 适用于哪些项目类型？
答：Tsup 适用于各种前端项目类型，包括库、应用程序、组件和微服务。