viteでnpm packageをpublishする

JavaScript

viteを使ってreact用のコンポート年とライブラリをnpmにデプロイしたのでメモを残しておきます。

tsconfig.json

型定義ファイルを出力したいのでnoEmitを消して出力するように変更します。
declarationDirは任意のディレクトリで構いませんが、今回はdist/index.d.tsを吐き出したかったため./distを指定します。

// tsconfig.json
{
  "compilerOptions": {
    // "noEmit": true,
    "emitDeclarationOnly": true,
    "declaration": true,
    "declarationDir": "./dist",
  },
}

型定義ファイルが出力されない

buildコマンドをtsc && vite buildの順で実行した場合、tscでdistフォルダに型定義ファイルが出力されるのですが、vite buildでdistフォルダが空にされてbuild後のファイルが配置されるため、一見型定義ファイルが出力されないように見えます。
解決するには別途viteの型出力用のライブラリを使うか、

vite build && tsc

の順でbuildコマンドを実行すればOKです。

vite.config.ts

viteのライブラリモードでビルドします。
build.libにエントリーポイントを指定します。
fileNameは任意の名前を指定します。バンドルするフォーマットを指定しない場合、デフォルトではindex.tsとindex.umd.cjsが出力されます。

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";
import { fileURLToPath } from "url";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "RuiFlyer",
      fileName: "index",
    },
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
        },
      },
    },
  },
});

今回はReactのコンポーネントライブラリですが配布物にReactを含める必要はありませんね。通常利用する側のプロジェクトがimportするため、このライブラリの成果物からはReactを除外します。
それがrollupOptions.externalです。ここに指定したものは外部化され、バンドル物には含まれなくなります。
output.globalsに関してはumdフォーマットで上記の外部ライブラリがインポートされた時の名前を指定します。

package.json

package.jsonに必要な情報を追記します。
重要なのはfilesで、これはpublishする時に含めるファイルを指定します。
ここを指定しない場合プロジェクトの全ファイルが対象となるため、distのみ出力すればいい場合などは忘れず指定しましょう。

// package.json
  "author": "author",
  "license": "MIT",
  "keywords": [
    "react",
    "keywords"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/repository/project"
  },
  "main": "./dist/index.umd.js",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "files": [
    "dist"
  ],

Publish

あとはnpm publish –access publicを実行すればOK。

なお–access publicをつけ忘れると警告されます。

npm ERR! code E402
npm ERR! 402 Payment Required - PUT https://registry.npmjs.org/repository/package - You must sign up for private packages

関連記事

コメント