TypeScript 如何用 rollup 打包
在前端开发里，咱们写代码常常用到各种工具，但有时候会遇到“代码太散、运行慢”的问题——比如你写了很多小文件，最后上线时得把它们合并成一个，还要处理兼容性。这时候打包工具就派上用场了，今天就用大家熟悉的两个工具：TypeScript（简称TS）和rollup，说说怎么搭配着用，把代码打包成能用的文件。
先搞懂两个工具的“分工”
很多人刚接触的时候会懵：TS和rollup到底各管啥？其实就像做手工：TS负责“把你写的代码翻译成浏览器能懂的普通JS”，比如你写了let a: number = 1这种带类型的代码，TS会自动删掉类型，变成普通JS；而rollup负责“把零散的JS文件打包成一个整洁的文件”，还能压缩、转成其他格式，就像把零散的零件组装成一个完整的玩具。举个生活化的例子：TS是你家的“翻译官”，把你说的带“术语”的话（TS代码）翻译成大家都懂的话（普通JS）；rollup是“整理师”，把你散落一地的文件（多个JS/TS文件）整理成一个好用的包裹（打包后的文件）。
第一步：先把工具“请进家门”
要干活得先装工具，用npm（前端常用的包管理工具）就行。打开电脑的命令行，跟着输三行命令就行：
第一行装TS的核心工具和类型定义，这样你写的TS代码能被识别：npm install typescript @types/node --save-dev
第二行装rollup的核心工具，用来打包：npm install rollup --save-dev
第三行装两个辅助插件，少了它们会出问题：一个是让rollup能处理TS的插件，另一个是让rollup能读取Node.js里文件的插件：npm install @rollup/plugin-typescript @rollup/plugin-node-resolve --save-dev
装完之后，你的项目文件夹里会多一个node_modules文件夹，还有package.json，这些都是工具的“家”，不用手动改，后续会自动关联。
第二步：写配置文件，给工具“说清要求”
工具不会自己干活，得给它们写个“任务清单”，也就是配置文件。首先建一个tsconfig.json，这是给TS的要求，比如告诉TS要翻译成哪种JS版本，要不要删类型之类的。这个文件内容不用复杂，抄现成的简化版就行：
`json
{
"compilerOptions": {
"target": "ES6",
"module": "ESNext",
"strict": true,
"outDir": "./dist",
"rootDir": "./src"
}
}
`
解释一下：target: ES6就是让TS翻译成浏览器常用的ES6版本；rootDir是你写代码的文件夹，outDir是打包后输出的文件夹，相当于“把源文件都放在src里，打包好的文件放dist里”。
然后再建一个rollup的配置文件rollup.config.js，给rollup说清楚“用哪个插件、打包哪个文件、输出成什么样子”，内容也很简单：
`javascript
import typescript from '@rollup/plugin-typescript';
import { nodeResolve } from '@rollup/plugin-node-resolve';
export default {
input: 'src/index.ts', // 要打包的入口文件，就是你项目里最主要的那个TS文件
output: {
file: 'dist/bundle.js', // 打包后输出的文件名
format: 'iife' // 打包成能直接在浏览器用的格式，就像把包裹做成能直接用的快递盒
},
plugins: [nodeResolve(), typescript()] // 用刚才装的两个插件，先找依赖，再转TS
};
`
第三步：测试一下，看看能不能“顺利打包”
现在可以写点简单的测试代码试试。先在项目里建src文件夹，再在里面建index.ts，写一行简单的代码：console.log("TypeScript用rollup打包成功啦！");
然后打开package.json，找到scripts那部分，加一行打包的命令："build": "rollup -c"，意思是“用rollup的配置文件打包”。
最后打开命令行，输入npm run build，等个几秒钟，你会看到项目里多了dist文件夹，里面有个bundle.js，打开它，里面就是你刚才写的代码，还经过了处理——这就说明打包成功了！
注意几个容易踩的“小坑”
刚开始试的时候可能会遇到小问题，别慌，都是常见的：如果提示“找不到TS文件”，检查一下input路径是不是对的；如果打包后代码乱乱的，可能是没加压缩，后续可以加个@rollup/plugin-terser插件，打包成更小的压缩版；如果是在浏览器用，确保输出的格式是iife（刚才配置里的那个），不然可能会报错。
其实这套搭配已经能满足大部分前端小项目的打包需求了，从简单的工具开始入手，慢慢熟悉每个步骤，以后遇到更复杂的打包需求也能举一反三。