viteでライブラリを作る(TypeScript対応)

3 min read

viteのLibrary Modeを使うことで簡単にライブラリが作ることができます。

本記事では加えて、TypeScript対応の方法も説明していきます。

viteの設定

まずは、vite.config.jsから見ていきましょう。

const path = require("path");
const { defineConfig } = require("vite");

module.exports = defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, "lib/main.js"),
      name: "MyLib",
      fileName: (format) => `my-lib.${format}.js`,
    },
  },
});

ライブラリモードのためのbuild.libオプションを説明すると、

entry

作成するバンドルのエントリーポイントを指定します。

このファイルで公開されている関数や変数が公開されます。

name

<script />タグを用いてグローバルにインストールした場合に使用される名前になり、window.MyLibというアクセスが可能になります。(よって、CommonJSやESMでは関係ないです)

fileName

配布ディレクトリ(例:dist)に出力されるファイル名を指定できます。

省略した場合は、package.jsonのnameオプションが使用されます。

出力形式(format)を引数に取る関数を指定すると、フォーマット毎に名前を変えることができます。

formatはデフォルトでは es(ESM)とumd(UMD)ですが、rollupのオプションを指定することで、変更することもできます。

ReactやVueのライブラリを作る場合

Reactのフック等のライブラリを公開する場合は、追加で設定が必要です。

// vite.config.js
const path = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'lib/main.js'),
      name: 'MyLib',
      fileName: (format) => `my-lib.${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

externalはバンドルしてほしくないライブラリを指定します。

そして、globalsを指定することでexternalで指定したライブラリがUMDビルド時に<script>タグで読み込まれた際に使用されるべき変数名を設定できます。

ここで指定したライブラリは、peerDependenciesとして設定すると良いでしょう。

package.jsonの設定

viteに限った設定ではないのですが、説明します。

package.jsonのmainフィールドに生成したファイルを指定し、パッケージに含める配布フォルダをfilesフィールドに指定します。

{
  ...
  "files": [
    "/dist"
  ],
  "main": "./dist/my-lib.umd.js"
  "module": "./dist/my-lib.es.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.es.js",
      "require": "./dist/my-lib.umd.js"
    }
  }
  ...
}

もし、ブラウザ環境のみをターゲットにしている場合は、mainの代わりにbrowserフィールドを指定します。

{
  ...
  "browser": "dist/my-lib.umd.js"
  ...
}

後は、npm publishの手順を踏めば公開できます。

公開手順は、以下の記事で正しく解説されているので参照してください。

https://chaika.hatenablog.com/entry/2019/08/15/000000

TypeScriptに対応

TypeScriptに対応するには、型定義を提供する必要があります。(これもviteに限らない話になります)

ライブラリのコードをJSで書いた場合は自分で作成する必要があり、TSで書いた場合は自動生成できます。(自動生成の方法も後で書きます)

まず、作成した型定義を指定する方法を説明します。

TypeScriptのドキュメントによると、package.jsonのtypesフィールドに型定義を指定することで、利用する側は型定義ファイルを認識できるようになり、更にfilesフィールドに型定義を格納しているフォルダを指定し、同梱して公開します。

{
  ...,
  "types": "./types/main.d.ts",
  "files": [
    "/dist",
    "/types"
  ],
  ...,
}

次に、TSのコードから型定義を生成する方法を説明します。

型定義を自動生成するにはtsconfig.jsonを設定する必要があります。

下記に示すように、noEmitオプションを消し、declaration(型宣言)に関わるオプションを追加します。

{
  "compilerOptions": {
    ...,
-   "noEmit": true,
+   "emitDeclarationOnly": true,
+   "declaration": true,
+   "declarationMap": true,
+   "declarationDir": "./types",
    ...
  },
  ...
}

ここで、declarationDirに指定したフォルダ(./types)に型定義が格納されます。

終わりに

viteを使うとライブラリの公開も非常に簡単になることが分かりました。

読んでいただいた方は、是非思いついたアイデアを公開して頂けたらと思います。

簡単に始めたい方は、Githubのテンプレートも用意してあるので、ご利用ください。

https://github.com/coder-ka/vite-ts-lib-starter

Discussion

ログインするとコメントできます