NextJS+TS项目：如何配置tsconfig生成单个.ts文件到src？

一、修正tsconfig.json核心问题 #

当前配置无法生成文件的关键是noEmit: true，且NextJS默认配置不适合库打包，调整后的配置如下：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": false, // 关闭禁止输出，允许生成编译文件
    "esModuleInterop": true,
    "module": "umd", // 采用UMD格式，兼容全局变量/CommonJS/ES模块
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false, // 关闭模块隔离，支持打包工具合并代码
    "jsx": "react", // 直接编译JSX为React.createElement，而非保留JSX语法
    "incremental": true,
    "baseUrl": ".",
    "declaration": true,
    "rootDir": "./components", // 仅以组件目录为源码根目录，排除Next页面/API
    "outDir": "./src", // 按要求输出到src目录
    "declarationDir": "./src/types" // 类型声明单独输出到src/types
  },
  "include": [
    "components/**/*.ts",
    "components/**/*.tsx",
    "utils/**/*.ts",
    "types/**/*.ts",
    "services/**/*.ts",
    "styles/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "pages",
    "public",
    "cypress",
    "@percy/cypress"
  ]
}

二、引入Rollup实现单文件打包 #

TypeScript编译器(tsc)仅做单文件编译，不会合并代码生成单文件，需要用Rollup完成打包：

1. 安装依赖 #

yarn add rollup rollup-plugin-typescript2 rollup-plugin-terser rollup-plugin-postcss --dev

2. 配置Rollup（根目录创建rollup.config.js） #

import typescript from 'rollup-plugin-typescript2';
import terser from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';

export default {
  input: './components/index.ts', // 组件导出入口文件
  output: {
    file: './src/intercom-button-library.js', // 输出到src的单文件库
    name: 'IntercomButton', // 全局变量名，嵌入网站后可通过window.IntercomButton调用
    format: 'umd',
    sourcemap: true
  },
  plugins: [
    // 处理样式，注入到JS中，嵌入时自动加载
    postcss({
      inject: true,
      minimize: true
    }),
    // 用修正后的tsconfig编译TypeScript
    typescript({
      tsconfig: './tsconfig.json',
      useTsconfigDeclarationDir: true
    }),
    // 压缩代码
    terser()
  ]
};

三、修改构建脚本 #

在package.json中替换原NextJS构建命令：

{
  "scripts": {
    "build": "rollup -c && tsc --emitDeclarationOnly"
  }
}

执行yarn build后，会在src目录生成：

• intercom-button-library.js：可嵌入的单文件库
• types/：类型声明文件（可选，用于TS项目引用）

四、资源文件处理（图标/字体） #

要实现无依赖嵌入，需把公共目录的图标、字体转成Base64嵌入样式文件，或上传到CDN后在代码中直接引用CDN地址，避免依赖本地资源路径。

五、代码适配注意事项 #

• 移除所有NextJS专属API（如next/link、useRouter），改用纯React API
• 确保组件是自包含的，不依赖Next的页面路由或SSR逻辑
• 样式避免使用CSS Modules，改用全局类名或内联样式，保证嵌入后样式正常加载

内容的提问来源于stack exchange，提问作者Gigi