TSDX项目深度解析：如何自定义构建配置-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00570/article/details/148393883

TSDX项目深度解析：如何自定义构建配置

tsdx Zero-config CLI for TypeScript package development 项目地址: https://gitcode.com/gh_mirrors/ts/tsdx

前言

TSDX是一个优秀的TypeScript库开发工具链，它提供了开箱即用的构建配置，让开发者能够快速启动和发布高质量的TypeScript库。然而在实际开发中，我们有时需要根据项目需求对默认配置进行调整。本文将深入探讨TSDX的自定义配置能力。

Rollup配置自定义

注意事项

重要警告：修改默认配置会覆盖TSDX的内部行为，可能导致某些内部保证和假设失效。这类更改可能会破坏内部行为，并且在版本更新时可能变得非常脆弱。请谨慎使用！

基本配置方法

TSDX底层使用Rollup进行构建。虽然默认配置已经能满足大多数项目需求（例如Formik就使用了默认配置），但开发者仍然可以通过在项目根目录创建tsdx.config.js文件来自定义Rollup配置：

// 此文件不会被TypeScript或Babel转译，请使用纯ES6/Node.js语法
module.exports = {
  // 这个函数会为每个entry/format/env组合运行
  rollup(config, options) {
    return config; // 必须返回配置对象
  },
};

配置选项详解

options对象包含以下属性：

interface TsdxOptions {
  input: string;       // 入口文件路径
  name: string;        // 包名称
  target: 'node' | 'browser';  // JS目标环境
  format: 'cjs' | 'umd' | 'esm' | 'system';  // 模块格式
  env: 'development' | 'production';  // 环境
  tsconfig?: string;   // tsconfig文件路径
  extractErrors?: boolean;  // 是否提取错误
  minify?: boolean;    // 是否压缩
  writeMeta?: boolean; // 是否写入元数据
  transpileOnly?: boolean; // 仅转译不进行类型检查
}

实战示例：添加PostCSS支持

下面是一个添加PostCSS支持的完整示例：

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        plugins: [
          autoprefixer(),  // 自动添加浏览器前缀
          cssnano({       // CSS压缩
            preset: 'default',
          }),
        ],
        inject: false,    // 不自动注入CSS
        // 仅在第一个bundle时提取CSS（避免生成多余文件）
        extract: !!options.writeMeta,
      })
    );
    return config;
  },
};