Rollup + TS

2025-06-24

Rollup 是一种 JavaScript 模块打包器，用于将多个模块打包成一个单独的文件。使用 Rollup 打包（构建）ts 项目：

更小的包体积：Rollup 可以将代码压缩到最小，因为它只包含实际使用的代码，而不是整个库或框架。

相比 webpack，Rollup 打包后的体积更小。
更快的加载速度：由于 Rollup 生成的代码更小，因此它加载更快，这对于移动设备和低带宽连接非常有用。

Rollup 适合开发一些小的框架、控件等。
更好的 Tree-shaking：Rollup 可以识别和删除未使用的代码，因此可以更有效地进行 Tree-shaking。

Tree-shaking 是一种 JavaScript 代码优化技术，它可以自动删除未使用的代码，以减小代码的体积，提高应用程序的性能。

它需要使用支持 ES6 模块语法的打包工具，例如 Webpack、Rollup 等。在使用这些工具时，需要确保在配置中启用 Tree-shaking 功能，以便在打包时自动删除未使用的代码。
支持 ES6 模块：Rollup 原生支持 ES6 模块，因此可以使用 ES6 的 import 和 export 语法，而不需要使用特殊的语法或工具。
插件生态丰富：Rollup 有许多插件可用于优化、压缩和转换代码，以及处理其他类型的文件，例如 CSS 和图像。

安装

全局安装 rollup

npm install rollup-g

需安装以下的包：

package.json

{
  "name": "rollupTs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_ENV=development  rollup -c -w",
    "build": "cross-env NODE_ENV=produaction  rollup -c"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cross-env": "^7.0.3", // 在命令时区分生产和开发环境
    "rollup-plugin-livereload": "^2.0.5", // 安装热更新
    "rollup-plugin-node-resolve": "^5.2.0", // 引入外部依赖
    "rollup-plugin-replace": "^2.2.0", // 替换环境变量给浏览器
    "rollup-plugin-serve": "^1.1.0", // 安装rollup web服务
    "rollup-plugin-terser": "^7.0.2", // 安装代码压缩插件
    "rollup-plugin-typescript2": "^0.31.1", // 安装TypeScript转换器，它会去读取tsconfig.json文件
    "typescript": "^4.5.5"
  }
}

配置

需要在 rollup.config.js 里配置 Rollup 相关信息：

// rollup.config.js
console.log(process.env); // cross-en环境变量信息
import ts from "rollup-plugin-typescript2"; // 识别ts文件
import path from "path";
import serve from "rollup-plugin-serve"; // 启动前端服务
import livereload from "rollup-plugin-livereload"; // 热更新服务
import { terser } from "rollup-plugin-terser"; // 代码压缩
import resolve from "rollup-plugin-node-resolve";
import repacle from "rollup-plugin-replace"; // 在打包过程中替换代码中的变量或字符串 @5

const isDev = () => {
  // 设置开发环境 @7
  return process.env.NODE_ENV === "development";
};
export default {
  input: "./src/main.ts", // 入口文件 @1
  output: {
    file: path.resolve(__dirname, "./lib/index.js"), // 出口（输出）文件地址，也就是打完包后的文件
    format: "umd", // 指定输出文件的格式（模块化规范）
    sourcemap: true, // 开启源map，可以让打包后的代码对应到源代码，方便调试 @3
  },

  plugins: [
    // 配置插件
    ts(), // 识别ts文件，它会自动读取tsconfig.json
    terser({
      // 代码压缩 @2
      compress: {
        drop_console: !isDev(), // 配置打包后自动删除console.log()
      },
    }),
    repacle({
      // @6
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    }),
    resolve([".js", ".ts"]),
    isDev() && livereload(), // 在开发环境下，livereload()启动热更新服务 @4
    isDev() &&
      serve({
        // 在开发环境下，serve启动前端（页面）服务
        open: true, // 是否打开页面
        port: 8089, // 页面打开的端口
        openPage: "/public/index.html", // 页面文件
      }),
  ],
};

@1：rollup 不认识 ts，所以需要安装识别 ts 的插件rollup-plugin-typescript2；

@2：会将代码压缩打包。但是代码压缩后不方便调试查看。

@3：开启源 map，可以让打包后的代码对应到源代码，方便调试。需要在 tsconfig.json 里面同样配置：
"sourceMap": true
@4：热更新服务会在启动前端（页面）时，修改文件页面会自动刷新；

@5、@6：由于浏览器里不支持 process.env，它是在 node 端支持的，所以需要将其从 node 里面注册到浏览器中，可以使用rollup-plugin-replace来进行替换；

@7：如果是开发环境则会启动包含isDev()的配置（如热更新，启动前端打开页面等），如果是生产环境则不启动；

打包基本流程：

首先需要一个打包的入口文件，一般为 index.js；
然后再 package.json 里的 main 指定这个文件；

启动命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "rollup -c -w", // 读取rollup.config.json文件，并监听，如果该文件有改动则会自动重启rollup
    "build":"rollup -c" // 读取rollup.config.json文件
},

rollup -c之后会产生一个在指定路径打包好的文件。