reactjs - كيف تجمع بين TypeScript و Vite و React و npm link؟
كتبت حزمة TypeScript بسيطة ونُشرت على سجل خاص وأريد استيرادها في تطبيق React TypeScript تم إنشاؤه باستخدام Vite.
كل شيء يعمل بشكل جيد حتى أحاول ربط npm بين الحزمتين. بمجرد الربط، ما زلت قادرًا على بناء التطبيق من خلال npm run build (في الواقع، لم يتم اختبار النتيجة بعد)، ولكن بيئة التطوير المحلية التي يتم تشغيلها من خلال npm run dev تستمر في الفشل مع الخطأ التالي.
[vite] خطأ داخلي في الخادم: فشل في تحديد نقطة الدخول للحزمة "my-package". قد تحتوي الحزمة على تحديد خاطئ للملف الرئيسي/الوحدة/التصديرات في ملف package.json الخاص بها: فشل في تحديد نقطة الدخول للحزمة "my-package". قد تحتوي الحزمة على تحديد خاطئ للملف الرئيسي/الوحدة/التصديرات في ملف package.json الخاص بها.
أي فكرة؟
الملفات في my-package.
index.ts
export class User {
public email?: string;
public name?: string;
constructor(src: Partial<User> = {}) {
this.email = src.email || "-";
this.name = src.name || "";
}
public isValid(): boolean {
return this.email !== "-";
}
}
باكيدج.جينسون
{
"name": "my-package",
"description": "my-package",
"license": "UNLICENSED",
"version": "1.0.3",
"devDependencies": {
"@types/node": "16.11.11",
"ts-node": "10.4.0",
"typescript": "4.5.2"
},
"scripts": {
"prepack": "tsc"
}
}
tsconfig.json
{
"compilerOptions": {
"esModuleInterop": true,
"declaration": true,
"module": "ESNext",
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"target": "ESNext"
},
"include": ["*.ts"]
}
الملفات في تطبيق React.
tsconfig.json
{
"compilerOptions": {
"allowJs": false,
"allowSyntheticDefaultImports": true,
"esModuleInterop": false,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"jsx": "react-jsx",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"module": "ESNext",
"moduleResolution": "Node",
"noEmit": true,
"resolveJsonModule": true,
"skipLibCheck": false,
"strict": true,
"target": "ESNext",
"useDefineForClassFields": true
},
"include": ["./src"]
}
vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
build: { outDir: "dist" },
optimizeDeps: { exclude: ["my-package"] },
plugins: [react()],
resolve: { dedupe: ["my-package"] },
server: { hmr: { overlay: false } }
});