使用Rollup.js来压缩打包Node.js/TS项目

0.写在前面

• 正常情况下使用tsc将TS项目转化为JS，但是因为没有使用打包工具，所以往往体积较大，本教程使用Rollup.js来压缩tsc后的JS程序，实现打包和压缩
• 本教程基于使用TS开发的Node.js项目来讲解

1.安装

首先安装Rollup.js
官网

yarn add -D rollup

安装Rollup.js的插件

yarn add -D @rollup/plugin-commonjs rollup-plugin-terser rollup-plugin-typescript2

插件说明

• @rollup/plugin-commonjs：让rollup知道项目用了那些依赖，打包的时候不要忘了
• rollup-plugin-terser：压缩代码
• rollup-plugin-typescript2：让rollup可以看懂TS代码

2.配置文件

新建rollup.config.js文件，写入压缩和打包规则

// 导入依赖
const { terser } = require('rollup-plugin-terser')
const commonjs = require('@rollup/plugin-commonjs')
const typescript = require('rollup-plugin-typescript2')
​
// tsconfig.json合并选项
// 一般来说默认使用项目的tsconfig.json，如果有个别需要修改的如下，可以在此修改
const override = { compilerOptions: { module: 'ESNext' } }
​
module.exports = {
  // 项目入口
  input: 'src/app.ts',
​
  // 打包后的出口和设置
  output: {
    file: 'dist/app.min.js',
    format: 'cjs',
    sourcemap: true,
    exports: 'default',
  },
​
  // 使用的插件
  // 注意，这里的插件使用是有顺序的，先把ts编译为js，然后查找依赖，最后压缩
  plugins: [typescript({ tsconfig: './tsconfig.json', tsconfigOverride: override }), commonjs(), terser()],
}

3.修改package.json

在package.json追加
-c的意思是，使用配置文件运行

 "rollup:build": "rollup -c",

4.使用

运行rollup:build即可

yarn rollup:build

5.验证

Rollup.js导入前，使用tsc编译后的大小是106KB

Rollup.js导入后大小为12.2KB，大幅压缩了体积