likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 18

0.写在前面

  • 正常情况下使用tscTS项目转化为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来压缩打包Node.js/TS项目

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

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