Closed18日前にクローズ12

Brand new try! (2024/11/04): ReactのUIライブラリのテストサンプルの作成にトライ！

イベント情報
https://brand-new-try.connpass.com/

今回の参考

UI コンポーネントプロジェクトを作る

npm create vite@latest

名前 test-ui
React, TypeScript

cd test-ui
npm install

Viteをライブラリモードにする

ライブラリフォルダを作成

mkdir lib

vite.config.tsの設定

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
+ import { resolve } from "path";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, "lib/main.ts"),
+      name: "test-ui",
+      // 適切な拡張子が追加されます
+      fileName: "test-ui",
+    },
+    rollupOptions: {
+      // ライブラリーにバンドルされるべきではない依存関係を
+      // 外部化するようにします
+      external: ["react", "react-dom", "react/jsx-runtime"],
+      output: {
+        // 外部化された依存関係のために UMD のビルドで使用する
+        // グローバル変数を提供します
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+          "react/jsx-runtime": "react/jsx-runtime",
+        },
+      },
+    },
+  },
});

テストコンポーネントの設定

lib 配下に

Button
- Button.tsx
main.ts

Button.tsx

Button.tsx

import React from "react";

export const Button = ({ children }) => {
  return <button>{children}</button>;
};

main.ts

export { Button } from "./Button/Button";

package.json の設定

package.json

{
  "name": "test-ui",
  "private": true,
  "version": "0.0.0",
  "type": "module",
+  "files": ["dist"],
+  "main": "./dist/test-ui.umd.cjs",
+  "module": "./dist/test-ui.js",
+  "exports": {
+    ".": {
+      "import": "./dist/test-ui.js",
+      "require": "./dist/test-ui.umd.cjs"
+    }
+  },
  "scripts": {
    "dev": "vite",
+    "prebuild": "rm -rf dist",
    "build": "tsc -b && vite build",

npm run build

エラー

vite.config.ts:3:25 - error TS2307: Cannot find module 'path' or its corresponding type declarations.

3 import { resolve } from "path";
                          ~~~~~~

vite.config.ts:10:22 - error TS2304: Cannot find name '__dirname'.

10       entry: resolve(__dirname, "lib/main.ts"),
                        ~~~~~~~~~
Found 2 errors.

解決

pm install @types/node --save-dev

tsconfig.node.json

{
  "compilerOptions": {
+    "types": ["node"],

npm run build

解決！

srcの配下を色々削除する

使わないの削除する

元

削除後

App.tsx

import { Button } from "../lib/main";
function App() {
  return (
    <>
      <div>
        Test
      </div>
    </>
  );
}

export default App;

main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
- import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,

UIコンポーネントの削除

App.tsx

+ import { Button } from "../lib/main";
function App() {
  return (
    <>
      <div>
-        Test
+        <Button>Test</Button>
      </div>
    </>
  );
}

export default App;

動かしてみる

npm run dev

OK!

PATHを通す

tsconfig.app.json

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
+    "paths": {
+      "test-ui": ["./lib/main.ts"]
+    },

    /* Bundler mode */
    "moduleResolution": "Bundler",

App.tsx

- import { Button } from "../lib/main";
+ import { Button } from "test-ui";
function App() {
  return (
    <>
      <div>
        Test
        <Button>Test</Button>
      </div>
    </>
  );
}

export default App;

まだエラーになる

npm i vite-tsconfig-paths

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";
+ import tsconfigPaths from "vite-tsconfig-paths";

// https://vite.dev/config/
export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tsconfigPaths()],
  build: {

npm run dev

動く

npm に公開

package.json

{
  "name": "test-ui",
-  "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
  "type": "module",
  "files": [
    "dist"
  ],
  "main": "./dist/test-ui.umd.cjs",
  "module": "./dist/test-ui.js",
  "exports": {
    ".": {
      "import": "./dist/test-ui.js",
      "require": "./dist/test-ui.umd.cjs"
    }
  },
  "scripts": {
    "dev": "vite",
    "prebuild": "rm -rf dist",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
+    "publish": "npm run build && npm publish"
  },

npm にユーザーを登録する(アドレスは公開されるので注意)
https://www.npmjs.com/

npm と紐づける

npm adduser

ブラウザが出てくるので認証する

npm run publish

エラー

npm error code E403
npm error 403 403 Forbidden - PUT https://registry.npmjs.org/test-ui - You do not have permission to publish "test-ui". Are you logged in as the correct user?
npm error 403 In most cases, you or one of your dependencies are requesting
npm error 403 a package version that is forbidden by your security policy, or
npm error 403 on a server you do not have access to.
npm error A complete log of this run can be found in: /Users/mae/.npm/_logs/2024-11-04T02_43_09_006Z-debug-0.log

修正

package.json

{
-  "name": "test-ui",
+  "name": "mae616_test-ui",
  "version": "0.0.1",
  "type": "module",

またエラー

403 Forbidden - PUT https://registry.npmjs.org/mae616_test-ui - You cannot publish over the previously published versions: 0.0.1.

初回は

npm publish --access=public

エラー

npm notice Publishing to https://registry.npmjs.org/ with tag latest and public access
npm error code E403
npm error 403 403 Forbidden - PUT https://registry.npmjs.org/mae616_test-ui - You cannot publish over the previously published versions: 0.0.2.
npm error 403 In most cases, you or one of your dependencies are requesting
npm error 403 a package version that is forbidden by your security policy, or
npm error 403 on a server you do not have access to.

でも公開できてた(テストプロジェクトのため現在は削除ずみ)

テストする

npx create-remix@latest

npm i mae616_test-ui

コードを埋め込んで

できた

参考
npmの名前衝突が厄介。有料なら？スコープ（名前空間）が使えるらしい。いいなぁ。

このスクラップは18日前にクローズされました