RollupでTypeScriptを使ってみる

Posted at 2024-02-22

はじめに

Rollup と TypeScript でライブラリを開発してみたいと考え、まずは Rollup と TypeScript でシンプルな開発環境を構築してみました。
その時の雑メモを備忘録として残しておきます。
npm や TypeScript の詳細については割愛しております。

index.html に「Hello, World」と表示できればゴールとします。

環境

Node.js v21.2.0
npm v10.2.3
rollup v4.12.0
@rollup/plugin-typescript v11.1.6
tslib v2.6.2

最終的なディレクトリ構造

ディレクトリ構造

rollup-ts-test/
  ├ node_modules/
  ├ src/
  │  └  app.ts
  ├ bundle.js
  ├ index.html
  ├ package-lock.json
  ├ package.json
  ├ rollup.config.js
  └ tsconfig.json

環境構築

作業用ディレクトリと index.html を作成

作業用のディレクトリrollup-ts-testを作成して、作成したディレクトリ内にindex.htmlを作成します。

ターミナル

mkdir rollup-ts-test
cd rollup-ts-test
touch index.html

ディレクトリ構造

rollup-ts-test/
  └ index.html

必要なパッケージをインストール

npmで必要なパッケージをインストールします。

ターミナル

npm init -y
npm i -D rollup @rollup/plugin-typescript tslib

rollupは Rollup のパッケージ、@rollup/plugin-typescriptとtslibは Rollup で TypeScript に対応するためにパッケージです。
この時、node_modulesフォルダとpackage.json、package-lock.jsonファイルが作成されます。

ディレクトリ構造

rollup-ts-test/
  ├ node_modules/
  ├ index.html
  ├ package-lock.json
  └ package.json

src フォルダと ts ファイルを準備

srcフォルダとapp.tsを用意して、app.ts に「Hello, World」を出力する記述をします。

ターミナル

mkdir src
cd src
touch app.ts

app.ts

function greeter(person: string): string {
  return 'Hello, ' + person
}

const user: string = 'World';

document.body.textContent = greeter(user);

ディレクトリ構造

rollup-ts-test/
  ├ node_modules/
  ├ src/
  │  └  app.ts
  ├ index.html
  ├ package-lock.json
  └ package.json

rollup.config.js を作成

Rollup のコンフィグファイルrollup.config.jsを作成します。

ターミナル

cd ../
touch rollup.config.js

rollup.config.js

import typescript from '@rollup/plugin-typescript';

export default {
  input: './src/app.ts',
  output: {
    file: 'bundle.js',
    format: 'iife',
  },
  plugins: [
    typescript()
  ]
}

ディレクトリ構造

rollup-ts-test/
  ├ node_modules/
  ├ src/
  │  └  app.ts
  ├ index.html
  ├ package-lock.json
  ├ package.json
  └ rollup.config.js

tsconfig.json を作成

ts ファイルを js ファイルにコンパイルするための設定ファイルtsconfig.jsonを作成します。

ターミナル

touch tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true
  }
}

ディレクトリ構造

rollup-ts-test/
  ├ node_modules/
  ├ src/
  │  └  app.ts
  ├ index.html
  ├ package-lock.json
  ├ package.json
  ├ rollup.config.js
  └ tsconfig.json

コンパイルしてみる

rollup -cコマンドでコンパイルしてみると下記のエラーが出ます。

ターミナル

[!] RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to ".mjs", set "type": "module" in your package.json file or pass the "--bundleConfigAsCjs" flag.

下記のどれかで対応することで解決します。

rollup.config.jsの拡張子を .mjs に変更するrollup.config.mjs
package.json ファイルに "type": "module" を追加する
--bundleConfigAsCjs フラグを Rollup コマンドに追加する

2の package.json ファイルに "type": "module" を追加するで対応します。

package.json

{
  "name": "rollup-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-typescript": "^11.1.6",
    "rollup": "^4.12.0",
    "tslib": "^2.6.2"
  }
}

これでもう一度rollup -cコマンドでkコンパイルしてみるとbundle.jsがルートディレクトリに作成されます。

ディレクトリ構造

rollup-ts-test/
  ├ node_modules/
  ├ src/
  │  └  app.ts
  ├ bundle.js
  ├ index.html
  ├ package-lock.json
  ├ package.json
  ├ rollup.config.js
  └ tsconfig.json

表示確認

index.htmlでbundle.jsを読み込んで「Hello, World」と表示されれば完成です。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rollup-test</title>
</head>
<body>
  <script src="./bundle.js"></script>
</body>
</html>

最後に

実務で使うにはまだまだ設定が足りないですが、
webpackよりも簡単にTypeScriptの環境構築ができた気がします。

参考元

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up