使用TypeScript与Rollup制作ES模块

ES模块（ECMAScript Module、ESM）是现代化的JavaScript模块格式，支持主流浏览器、Node.js等环境。

TypeScript为JavaScript提供了类型支持。

Rollup用于打包ES模块，还可以同时生成CommonJS等其它模块格式。

准备工作

前置依赖

推荐准备以下环境：

• Node.js
• pnpm

使用npm或者yarn代替pnpm也是可以的，下文将会以pnpm为例。

初始化项目

创建新的项目文件夹，在项目文件夹中打开终端（cmd、PowerShell、Bash、Zsh、Fish等），按顺序执行以下命令：

pnpm init

初始化完package.json后，可以按需编辑，详见官方文档。

需要编辑package.json文件：

• 加入module属性作为ES模块的输出文件，例如index.es.js
• 加入files属性来控制发布到NPM的文件，例如["index.js", "index.es.js"]

安装TypeScript、rollup及其插件，其中-D代表添加到devDependencies：

pnpm add -D typescript tslib rollup @rollup/plugin-typescript

（可选）如果需要ESLint，可以使用命令行交互来进行设置，笔者配置时选择了JSON配置文件：

pnpm create @eslint/config

如果安装了ESLint，还需要在.eslintrc.json中的parserOptions里增加project：

"project": ["./tsconfig.json"]

（可选）如果需要Jest，可以安装并配置，笔者配置时选择了TypeScript配置文件：

pnpm add -D jest @types/jest ts-node ts-jest
pnpm jest --init

如果安装了Jest，还需要将文件jest.config.ts中的preset改为ts-jest。

版本参考

笔者使用的版本： | 名称 | 版本 | | — | — | | Node.js | 19.7.0 | | pnpm | 7.29.1 | | TypeScript | 4.9.5 | | rollup | 3.19.1 | | ESLint | 8.36.0 | | Jest | 29.5.0 |

配置TypeScript

首先初始化TypeScript:

pnpm tsc --init

编辑tsconfig.json，修改module为esnext、target修改为esnext。

修改后的tsconfig.json参考：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

配置Rollup

新建文件rollup.config.ts，写入：

import typescript from '@rollup/plugin-typescript'
export default {
  input: 'src/index.ts',
  output: [
    {
      file: 'index.js',
      format: 'cjs'
    },
    {
      dir: 'index.es.js',
      format: 'es'
    }
  ],
  plugins: [
    typescript()
  ]
}

其中，src/index.ts是模块入口的路径、index.es.js是ES模块的输出路径、index.js是CommonJS的输出路径。

代码编写

完成配置以后，可以自由进行模块的代码编写，代码编写与一般的TypeScript无异，需要在入口文件中导出需要导出的内容。

简单示例

为了方便演示，本文给出一个简单的案例。

创建src/hello-world.ts，写入：

export default function helloWorld (): string {
  return 'Hello, World!'
}

创建src/index.ts作为入口文件，写入：

import helloWorld from './hello-world'
export default { helloWorld }

（可选）如果安装了Jest，创建test/hello-world.ts，写入：

import Test from '../src/index'
test('Hello World', () => {
  expect(Test.helloWorld()).toBe('Hello, World!')
})

模块构建

（可选）如果安装了ESLint，可以格式化一下代码：

pnpm eslint --fix 'src/**/*.ts'

（可选）如果安装了Jest，可以跑一下测试：

pnpm jest

通过Rollup进行构建，其中-c代表使用配置文件：

pnpm rollup -c --configPlugin typescript

根据上面的rollup.config.ts配置文件，构建的产物在index.js（CommonJS）以及index.es.js（ES模块）。

模块发布

在发布模块前，请先在npm中创建账户。 首先登录账户：

pnpm adduser

然后进行发布：

pnpm publish

参考文献

• [ECMAScript modules

  Node.js v19.7.0 Documentation](https://nodejs.org/api/esm.html)

• TypeScript: How to set up TypeScript
• TypeScript: Documentation - Modules

• [Introduction

  Rollup](https://rollupjs.org/introduction)

• [pnpm add pkg

  pnpm](https://pnpm.io/cli/add)

• Create an npm package template with TypeScript and rollup.js - DEV Community

• [Installation

  ts-jest](https://kulshekhar.github.io/ts-jest/docs/getting-started/installation/#jest-config-file)

• Getting Started with ESLint - ESLint - Pluggable JavaScript Linter