モノレポでnpm公開する（走り書き）

概要

• ほとんど初めてのnpmの公開だったので、次回ように簡単に手順をまとめる
• 現状は取っ散らかってしまっているので、次回の0から構築時にブラッシュアップ予定

初めに

基礎的な内容を含めてめちゃくちゃわかりやすい。簡単な初期構築や基本的なコマンドについて記載されている。

公開に必要な準備

リポジトリrootのpackage.jsonの作成

package.json

{
  "name": "my-project",
  "license": "UNLICENSED",
  "private": true
}

公開するディレクトリを作成する

# packages/ui配下にuiを作成する
npm init --scope tetex-public -w packages/ui

# 今回はreactのuiを公開するためreactを導入する
npm create vite@latest

.npmrc .npmignore

上述した参考サイトより、あると便利らしい。

.npmrc

init-author-email=[e-mail]
init-author-name=My Organization
init-author-url=https://example.com/
init-license= UNLICENSED
init-version=0.0.0

.npmignore

node_modules/
.git/
.gitignore
test/
__tests__/
*.test.js
*.spec.js
.DS_Store
.history

packages/package.jsonの修正

package.json

{
  "name": "@tetex-public/ui",/* 公開するので追加 */
  "version": "0.0.1",/* 公開するので追加 */
  "author": "koinunopochi",/* 公開するので追加 */
  "license": "MIT",/* 公開するので追加 */
  "description": "",
  "private": false,/* 公開するので追加 */
  "type": "module",
  "main": "./dist/index.cjs.js",/* 公開するので追加 */
  "module": "./dist/index.es.js",/* 公開するので追加 */
  "types": "./dist/index.d.ts",/* 公開するので追加 */
  "exports": {/* 公開するので追加 */
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.cjs.js",
      "types": "./dist/index.d.ts"
    },
    "./style.css": "./dist/index.css"/* 公開するので追加 */
  },
  "files": [/* 公開するので追加 */
    "dist"
  ],
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "peerDependencies": {　/* 公開するので追加 */
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/node": "^22.9.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.13.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "globals": "^15.11.0",
    "postcss": "^8.4.49",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "tailwindcss": "^3.4.15",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.11.0",
    "vite": "^5.4.10"
  },
  "publishConfig": { /* 公開するので追加 */
    "access": "public"
  },
  "dependencies": {
    "class-variance-authority": "^0.7.0",
    "tailwind-merge": "^2.5.4",
    "vite-plugin-dts": "^4.3.0"
  }
}

vite.config.tsにbuildを追加する

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { resolve } from 'path';
import dts from 'vite-plugin-dts';

// https://vite.dev/config/

export default defineConfig({
  plugins: [
    react(),
    dts({
      // 型定義ファイルの生成
      insertTypesEntry: true,
    }),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    },
  },
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: '@tetex/ui',
      formats: ['es', 'cjs'],
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'tailwindcss'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
        // 固定の文字列を指定
        assetFileNames: 'index.css',
      },
    },
  },
});

src/index.tsを作成する（npmにおけるエントリーポイント）

index.ts

// 現状は、テールウィンドの定義程度
import './styles/globals.css';

公開する手順

Login + build + 公開テスト

npm login
npm run build
# パッケージの内容確認
npm pack
# パッケージの公開（テスト）
npm publish --dry-run

事前準備

login後に

https://www.npmjs.com/~[username]?activeTab=orgs

にアクセスする。

organizationタブに行けるので、そこで今回作成したルートプロジェクトの名前を入れる。

お試し公開

npm publish