汪图南
  • RAG

    • RAG
  • 快速入门
  • 高级技巧
前端面试之道
  • 打包工具

    • Webpack
    • Rollup
  • TypeScript

    • TypeScript基础
    • TypeScript类型挑战
  • CSS预编译器

    • SASS
  • 自动化测试

    • Vue应用测试
  • Vue2.0源码分析
  • Vue3.0源码分析
  • 数据结构和算法(基础)
  • LeetCode(刷题)
  • JavaScript书籍

    • 你不知道的JavaScript(上)
    • 你不知道的JavaScript(中下)
    • JavaScript数据结构和算法
    • JavaScript设计模式与开发实践
    • 深入理解ES6
  • Git书籍

    • 精通Git
Github
  • RAG

    • RAG
  • 快速入门
  • 高级技巧
前端面试之道
  • 打包工具

    • Webpack
    • Rollup
  • TypeScript

    • TypeScript基础
    • TypeScript类型挑战
  • CSS预编译器

    • SASS
  • 自动化测试

    • Vue应用测试
  • Vue2.0源码分析
  • Vue3.0源码分析
  • 数据结构和算法(基础)
  • LeetCode(刷题)
  • JavaScript书籍

    • 你不知道的JavaScript(上)
    • 你不知道的JavaScript(中下)
    • JavaScript数据结构和算法
    • JavaScript设计模式与开发实践
    • 深入理解ES6
  • Git书籍

    • 精通Git
Github
  • Rollup基础

    • Rollup介绍
    • 核心概念
    • 基础配置
    • 配置项类型提示
    • 配置package.json
    • 常用插件
  • Rollup配置案例

    • Babel转义
    • 支持TypeScript
    • 环境区分
    • Eslint
    • 支持Jest自动化测试
    • 提交规范
    • Changelog

支持TypeScript

如果要支持TypeScript,需要安装几个npm包,如下:

# 安装rollup插件和其依赖包
$ npm install @rollup/plugin-typescript tslib -D

安装完毕后,把rollup.config.mjs配置文件中,把入口文件改成改为.ts后缀并引入typescript插件:

// rollup.config.mjs
import typescript from '@rollup/plugin-typescript'

export default {
  ...省略其它
  input: './src/index.ts',
  plugins: [
    typescript()
  ]
}

接着,在src目录下新建math.ts文件,将add和minus方法移动过去并填写相关类型:

export const add = (a: number, b: number): number => {
  return a + b
}

export const minus = (a: number, b: number): number => {
  return a - b
}

最后,入口文件src/index.js改成src/index.js,并在其中引用add和minus方法:

// src/index.ts

import { add, minus } from './math'

export const helloRollup = (): void => {
  console.log(add(1, 2))
  console.log(minus(3, 4))
  console.log('hello, rollup')
}

运行npm run build命令,在dist目录下打包出来的vue.esm.js文件代码如下:

var add = function (a, b) {
    return a + b;
};
var minus = function (a, b) {
    return a - b;
};

var helloRollup = function () {
    console.log(add(1, 2));
    console.log(minus(3, 4));
    console.log('hello, rollup');
};

export { helloRollup };
最后更新时间: 2025/5/6 15:36
贡献者: wangtunan
Prev
Babel转义
Next
环境区分