能否构建TypeScript项目？无target:ts选项时的单文件自动化打包咨询

当然可以实现这样的需求！虽然部分工具文档可能没特意强调对TypeScript的支持，但有不少成熟的自动化方案能帮你把项目打包成单个.ts文件，完美适配CodePen的粘贴需求。下面是几个实用的方案，按推荐度排序：

方案1：ESBuild（轻量快速首选） #

ESBuild对TypeScript的支持非常原生，打包速度快到离谱，配置也极简，特别适合这种场景。

• 先初始化项目并安装依赖：

  npm init -y
  npm install esbuild --save-dev
  

• 在项目根目录创建一个build.js脚本文件，用来配置打包规则：

  require('esbuild').buildSync({
    entryPoints: ['src/index.ts'], // 替换成你的项目入口文件路径
    bundle: true, // 开启打包合并功能
    outfile: 'dist/bundle.ts', // 输出的单个ts文件路径
    platform: 'browser', // 适配浏览器环境，符合CodePen的运行场景
    format: 'esm', // 输出ES模块格式，CodePen完美支持
    sourcemap: false, // 不需要源码映射的话可以关闭，减少文件体积
    // 可选：如果需要保留类型检查，单独用tsc做校验即可，ESBuild不负责类型检查
  })
  

• 在package.json里添加一条构建脚本：

  "scripts": {
    "build": "node build.js && tsc --noEmit" // 后半部分是可选的类型检查步骤
  }
  

• 执行npm run build，就能在dist目录下得到打包好的单个bundle.ts，直接复制粘贴到CodePen就行。

方案2：Rollup + TypeScript插件 #

Rollup是专注于库打包的工具，对Tree-shaking的支持非常出色，适合依赖较多、需要精细控制打包过程的项目。

• 初始化项目并安装依赖：

  npm init -y
  npm install rollup @rollup/plugin-typescript typescript tslib --save-dev
  

• 创建rollup.config.js配置文件：

  import typescript from '@rollup/plugin-typescript';
  
  export default {
    input: 'src/index.ts', // 项目入口
    output: {
      file: 'dist/bundle.ts', // 输出文件路径
      format: 'esm', // ES模块格式
    },
    plugins: [typescript({ tsconfig: './tsconfig.json' })], // 引入TypeScript插件
  };
  

• 生成并配置tsconfig.json（可以用tsc --init快速生成后修改）：

  {
    "compilerOptions": {
      "target": "ESNext",
      "module": "ESNext",
      "strict": true, // 开启严格类型检查
      "declaration": false, // 不需要生成类型声明文件
      "outDir": "./dist"
    },
    "include": ["src/**/*"] // 包含所有src目录下的文件
  }
  

• 在package.json中添加构建脚本：

  "scripts": {
    "build": "rollup -c"
  }
  

• 运行npm run build，就能得到干净的单个.ts文件了。

方案3：直接用TypeScript Compiler（tsc） #

如果你的项目没有第三方npm依赖，或者依赖都能通过全局变量引入，直接用tsc也能实现合并打包，不过功能相对有限。

• 初始化项目并安装typescript：

  npm init -y
  npm install typescript --save-dev
  

• 修改tsconfig.json配置：

  {
    "compilerOptions": {
      "target": "ESNext",
      "module": "None", // 禁用模块系统，让tsc把所有代码合并到一个文件
      "outFile": "./dist/bundle.ts", // 输出文件路径
      "strict": true
    },
    "include": ["src/**/*"]
  }
  

• 添加构建脚本：

  "scripts": {
    "build": "tsc"
  }
  

• 执行npm run build即可得到合并后的文件，但注意这种方式不支持打包npm依赖，只适合纯手写的TypeScript项目。

额外小贴士 #

• 不管用哪种方案，都建议开启TypeScript的严格模式（strict: true），提前发现类型问题，避免在CodePen运行时踩坑。
• 如果项目用到了浏览器API（比如document、window），记得在tsconfig.json的compilerOptions里添加"lib": ["ESNext", "DOM"]，获得完整的类型提示。
• 打包完成后可以检查下输出文件，ESBuild和Rollup都会自动做Tree-shaking，移除未使用的代码，让文件更精简。

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